es7學(xué)習(xí)教程之fetch解決異步嵌套問(wèn)題的方法示例

更新時(shí)間：2017年07月21日 10:53:34 作者：青石巷

這篇文章主要給大家介紹了關(guān)于es7學(xué)習(xí)教程之fetch解決異步嵌套問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。

本文主要給大家介紹的是關(guān)于fetch API解決異步嵌套問(wèn)題，下面話不多說(shuō)，來(lái)一起看看詳細(xì)的介紹：

我們之前學(xué)習(xí)了async和await，知道他是為了解決瀏覽器異步獲取的的！但是我們用fetch api的話方法會(huì)更加的簡(jiǎn)單

async和await解決異步嵌套

function ajax(url){

   return new Promise(function(reslove,reject){
    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);
      reslove(data);
     }
    }
    xmlHttp.send(null);
   })
  }
  let uldom=document.getElementById("students");
  let url="http://192.168.0.57:8000/students.json";
  async function main(){
  let data=await ajax(url);
  
  let students=data;
  let html="";
  for(let i=0,l=students.length;i<l;i++){
   let name=students[i].name;
   let age=students[i].age;
   html+=`
   <li>姓名${name},年齡${age}</li>
   `
  }
  uldom.innerHTML=html;
  }
  main();

我們需要?jiǎng)?chuàng)建Promise函數(shù)來(lái)進(jìn)行操作，如果我們用fetch解決的話，會(huì)更加的方便！

let uldom=document.getElementById("students");
  let url="http://192.168.0.57:8000/students.json";
  function main(){
   fetch(url).then(respone=>{
   return respone.json();
  }).then(data=>{
   let students=data;
   let html="";
   for(let i=0,l=students.length;i<l;i++){
    let name=students[i].name;
    let age=students[i].age;
    html+=`
    <li>姓名${name},年齡${age}</li>
    `
   }
   uldom.innerHTML=html;
  });
   
  }
  main();

不用創(chuàng)建Promise，直接調(diào)用then()是不是比上邊更加的簡(jiǎn)單！

async、await結(jié)合fetch處理異步

let uldom=document.getElementById("students");
 let url="http://192.168.0.57:8000/students.json"; 
 async function main(){
  let respone = await fetch(url);
  let student = await respone.json();
  let html="";
  for (let i=0,l=students.length;i<l;i++){
   let name=students[i].name;
   let age=students[i].age;
   html+=`
   <li>姓名${name},年齡${age}</li>
   `
  }
  uldom.innerHTML=html;
  }
 main()

感覺(jué)是不是很簡(jiǎn)單！比上一種方法更加的簡(jiǎn)單。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: