fetch结合(async函数来使用)

Coly 发布于2019-08-20 18:11 / 1742人阅读

摘要：结合函数来使用请求对于使用可以方便很多，这就是下面要使用的的代码，先熟悉了解下使用获取里的属性多带带创建一个文件，获取地址姓名年龄最终代码姓名年龄这是我的文件里的代码最后结果姓名年龄姓名年龄姓名年龄姓名年龄姓名年龄姓名年龄

fetch结合(async函数来使用)

ajax请求

function ajax(url){
    
          let xmlHttp=new XMLHttpRequest();
            xmlHttp.open("get",url,true);
            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4&&xmlHttp.status==200){
                    let data= JSON.parse(xmlHttp.responseText);
                    console.log(data);
                }
            }
            xmlHttp.send(null);
}

ajax(url);
let uldom=document.getElementById("students");

let url="http://192.168.0.46:8000/student.json";

对于使用fetch可以方便很多，这就是下面要使用的fetch的代码，先熟悉了解下：

/*fetch(url).then(respone=>{
    //return respone.text();
    return respone.json();
}).then(data=>{
    console.log(data);
})*/

使用fetch

//获取css里ul的id属性
 let uldom=document.getElementById("students");
//多带带创建一个json文件，获取地址
let url="http://192.168.0.46:8000/student.json";

function main(){
    fetch(url).then(respone=>{
    //return respone.text();
    return respone.json();
}).then(students=>{

    let html=``;
    for(let i=0,l=students.length;i姓名${name},年龄${age}
    `
    }

    uldom.innerHTML=html;
});

    
}
main();

最终代码

let uldom=document.getElementById("students");
let url="http://192.168.0.46:8000/student.json";

  async function main(){
        let respone = await fetch(url);
        let students = await respone.json();

    let html=``;
    for(let i=0,l=students.length;i姓名${name},年龄${age}
    `
    }
    uldom.innerHTML=html;
  }
main();

这是我的json文件里的代码：

[
    {"name":"ss","age":"3"},
    {"name":"aa","age":"1"},
    {"name":"qq","age":"4"},
    {"name":"zz","age":"3"},
    {"name":"xx","age":"5"},
    {"name":"cc","age":"7"}
]

最后结果：

姓名ss,年龄3
姓名aa,年龄1
姓名qq,年龄4
姓名zz,年龄3
姓名xx,年龄5
姓名cc,年龄7

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84173.html

快速理解和使用 ES7 await/async

摘要：是最重要特性之一，它是目前为止最佳的异步解决方案了。虽然没有在中录入，但很快就到来，目前已经在阶段。表示暂停，表示执行下一步，如果你不了解也没关系，可以忽略它直接学习。 await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入，但很快就到来，目前已经在 ES-Next Stage 4 阶段。直接上例子，比如我们需要...

Kross 2019-08-20 11:35 评论0 收藏0
如何实现一个Python爬虫框架

摘要：这篇文章的题目有点大，但这并不是说我自觉对爬虫这块有多大见解，我只不过是想将自己的一些经验付诸于笔，对于如何写一个爬虫框架，我想一步一步地结合具体代码来讲述如何从零开始编写一个自己的爬虫框架年到如今，我花精力比较多的一个开源项目算是了，这是 showImg(https://segmentfault.com/img/remote/1460000018513379); 这篇文章的题目有点大...

feng409 2019-07-31 10:10 评论0 收藏0
精益 React 学习指南（Lean React）- 3.4 掌控 redux 异步

摘要：举例来说一个异步的请求场景，可以如下实现任何异步的逻辑都可以，如等等也可以使用的和。实际上在中，一个就是一个函数。书籍完整目录 3.4 redux 异步 showImg(https://segmentfault.com/img/bVyou8); 在大多数的前端业务场景中，需要和后端产生异步交互，在本节中，将详细讲解 redux 中的异步方案以及一些异步第三方组件，内容有： redu...

JouyPub 2019-08-19 18:36 评论0 收藏0
Tornado 4.3文档翻译: 用户指南-协程

摘要：译者说于年月日发布，该版本正式支持的关键字，并且用旧版本编译同样可以使用这两个关键字，这无疑是一种进步。其次，这是最后一个支持和的版本了，在后续的版本了会移除对它们的兼容。译者说 Tornado 4.3于2015年11月6日发布，该版本正式支持Python3.5的async/await关键字，并且用旧版本CPython编译Tornado同样可以使用这两个关键字，这无疑是一种进步。其次...

SimonMa 2019-07-24 18:21 评论0 收藏0