本文主要給大家介紹的是關于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()感覺是不是很簡單！比上一種方法更加的簡單。
總結
以上就是這篇文章的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
