es7之fetch如何解決異步嵌套問題

這篇文章主要介紹了es7之fetch如何解決異步嵌套問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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();

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

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()是不是比上邊更加的簡單！

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()

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“es7之fetch如何解決異步嵌套問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!