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

創(chuàng)新互聯(lián)專注于宿城企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),成都商城網(wǎng)站開發(fā)。宿城網(wǎng)站建設(shè)公司,為宿城等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

我們之前學(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姓名${name},年齡${age}
   `
  }
  uldom.innerHTML=html;
  }
  main();

我們需要創(chuàng)建Promise函數(shù)來進行操作，如果我們用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姓名${name},年齡${age}
    `
   }
   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姓名${name},年齡${age}
   `
  }
  uldom.innerHTML=html;
  }
 main()

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