es7學(xué)習(xí)教程之fetch解決異步嵌套問(wèn)題的方法示例
本文主要給大家介紹的是關(guān)于fetch API解決異步嵌套問(wèn)題,下面話不多說(shuō),來(lái)一起看看詳細(xì)的介紹:
我們之前學(xué)習(xí)了async和await,知道他是為了解決瀏覽器異步獲取的的!但是我們用fetch api的話方法會(huì)更加的簡(jiǎn)單
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();
我們需要?jiǎng)?chuàng)建Promise函數(shù)來(lái)進(jìn)行操作,如果我們用fetch解決的話,會(huì)更加的方便!
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()是不是比上邊更加的簡(jiǎn)單!
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()
感覺(jué)是不是很簡(jiǎn)單!比上一種方法更加的簡(jiǎn)單。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
js實(shí)現(xiàn)鍵盤Enter鍵提交表單的方法
這篇文章主要介紹了js實(shí)現(xiàn)鍵盤Enter鍵提交表單的方法,涉及javascript鍵盤事件的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05extjs中form與grid交互數(shù)據(jù)(record)的方法
這篇文章介紹了extjs中form與grid交互數(shù)據(jù)(record)的方法,有需要的朋友可以參考一下2013-08-08Bootstrap框架實(shí)現(xiàn)廣告輪播效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架結(jié)合JavaScript實(shí)現(xiàn)廣告輪播特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11swiper+echarts實(shí)現(xiàn)多個(gè)儀表盤左右滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了swiper+echarts實(shí)現(xiàn)多個(gè)儀表盤左右滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06JavaScript 判斷對(duì)象中是否有某屬性的常用方法
判斷對(duì)象中是否有某屬性的常見(jiàn)方式總結(jié),不同的場(chǎng)景要使用不同的方式。這篇文章給大家介紹了JavaScript 判斷對(duì)象中是否有某屬性的常用方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-06-06js設(shè)計(jì)模式之結(jié)構(gòu)型享元模式詳解
這篇文章主要為大家詳細(xì)介紹了js設(shè)計(jì)模式之結(jié)構(gòu)型享元模式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09利用HTML5+Socket.io實(shí)現(xiàn)搖一搖控制PC端歌曲切換
這篇文章主要介紹了利用HTML5+Socket.io實(shí)現(xiàn)搖一搖控制PC端歌曲切換,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-01-01