es7學(xué)習(xí)教程之fetch解決異步嵌套問題的方法示例
本文主要給大家介紹的是關(guān)于fetch API解決異步嵌套問題,下面話不多說,來一起看看詳細的介紹:
我們之前學(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ù)來進行操作,如果我們用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()
感覺是不是很簡單!比上一種方法更加的簡單。
總結(jié)
以上就是這篇文章的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
extjs中form與grid交互數(shù)據(jù)(record)的方法
這篇文章介紹了extjs中form與grid交互數(shù)據(jù)(record)的方法,有需要的朋友可以參考一下2013-08-08swiper+echarts實現(xiàn)多個儀表盤左右滾動效果
這篇文章主要為大家詳細介紹了swiper+echarts實現(xiàn)多個儀表盤左右滾動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-06-06js設(shè)計模式之結(jié)構(gòu)型享元模式詳解
這篇文章主要為大家詳細介紹了js設(shè)計模式之結(jié)構(gòu)型享元模式的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09利用HTML5+Socket.io實現(xiàn)搖一搖控制PC端歌曲切換
這篇文章主要介紹了利用HTML5+Socket.io實現(xiàn)搖一搖控制PC端歌曲切換,非常具有實用價值,需要的朋友可以參考下。2017-01-01