本文主要給大家介紹的是關于fetch API解決異步嵌套問題，下面話不多說，來一起看看詳細的介紹：

我們之前學習了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();

我們需要創建Promise函數來進行操作，如果我們用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();

不用創建Promise，直接調用then()是不是比上邊更加的簡單！

async、await結合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()

感覺是不是很簡單！比上一種方法更加的簡單。

總結

以上就是這篇文章的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對錯新站長站的支持。