JS中async/await實(shí)現(xiàn)異步調(diào)用的方法
async/await多個(gè)函數(shù)關(guān)聯(lián)調(diào)用
async/await使得異步代碼看起來像同步代碼
async函數(shù)會(huì)隱式地返回一個(gè)promise,而promise的reosolve值就是函數(shù)return的值
Async/Await不需要寫.then,不需要寫匿名函數(shù)處理Promise的resolve值,也不需要定義多余的data變量,還避免了嵌套代碼
async聲明一個(gè)異步函數(shù)
await只能在async函數(shù)中使用,后面跟一個(gè)promise對(duì)象
所以在模擬異步調(diào)用函數(shù)時(shí),函數(shù)體內(nèi)返回promise
async/await缺點(diǎn)
async函數(shù)里,無論是Promise reject的數(shù)據(jù)還是邏輯報(bào)錯(cuò),都會(huì)被默默吞掉。所以最好把a(bǔ)wait放入try{}catch{}中,或者在async返回的promise對(duì)象中使用.cache捕獲錯(cuò)誤。
實(shí)現(xiàn)
項(xiàng)目中實(shí)現(xiàn)三個(gè)不同的接口調(diào)用,三個(gè)接口是相互關(guān)聯(lián)的,前一個(gè)接口的返回值是后一個(gè)接口的參數(shù),如果使用Promise實(shí)現(xiàn)的話,只能實(shí)現(xiàn)異步調(diào)用,但是無法相互關(guān)聯(lián),也就是數(shù)據(jù)不互通,所以使用async/await實(shí)現(xiàn)
- 接口調(diào)用的方法獨(dú)立封裝,參數(shù)可動(dòng)態(tài)設(shè)置
- async聲明異步方法,內(nèi)部使用await關(guān)鍵字調(diào)用封裝的接口,參數(shù)可直接傳入
- async/await相當(dāng)于將Promise異步調(diào)用同步化,數(shù)據(jù)可實(shí)現(xiàn)關(guān)聯(lián)
- async/await會(huì)默認(rèn)返回一個(gè)Promise對(duì)象,在實(shí)際調(diào)用中使用cache捕獲錯(cuò)誤
代碼實(shí)現(xiàn)
<script> //再此使用定時(shí)器模擬異步接口的調(diào)用 // 異步函數(shù)a function a() { return new Promise(resolve => { setTimeout(()=>{ resolve('a') }, 1000) }) } // 異步函數(shù)b,關(guān)聯(lián)a參數(shù) function b(a) { return new Promise(resolve => { setTimeout(()=>{ resolve(a+'b') }, 1000) }) } // 異步函數(shù)c,關(guān)聯(lián)b參數(shù) function c(b) { return new Promise(resolve => { setTimeout(()=>{ resolve(b+'c') }, 1000) }) } // 同步執(zhí)行三個(gè)關(guān)聯(lián)的異步函數(shù) async function d(){ const da = await a(); const db = await b(da); const dc = await c(db); return dc; } // 實(shí)際調(diào)用 d().then(res=>{ console.log(res) }).catch(err=>{ console.log(err) }); </script>
總結(jié)
以上所述是小編給大家介紹的JS中async/await實(shí)現(xiàn)異步調(diào)用的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Javascript實(shí)時(shí)柱狀圖實(shí)現(xiàn)代碼
js實(shí)現(xiàn)的實(shí)時(shí)柱狀圖,非常有創(chuàng)意的想法。2008-10-10阿里巴巴技術(shù)文章分享 Javascript繼承機(jī)制的實(shí)現(xiàn)
這篇文章主要介紹了阿里巴巴技術(shù)文章,分享的是一篇關(guān)于Javascript實(shí)現(xiàn)繼承機(jī)制的文章,感興趣的小伙伴們可以參考一下2016-01-01JavaScript將對(duì)象數(shù)組按字母順序排序的方法詳解
這篇文章主要介紹了JavaScript如何將對(duì)象數(shù)組按字母順序排序,本文介紹了三種解決方案,if條件語句 + sort(),localeCompare() + sort(),Collator() + sort(),有感興趣的同學(xué)可以跟著小編一起來看看2023-07-07關(guān)于javascript DOM事件模型的兩件事
DOM事件模型的兩件事:事件捕捉(Event Capture)的實(shí)現(xiàn)問題以及IE的高級(jí)事件處理模型的問題。2010-07-07JS生成隨機(jī)數(shù)的多種方法匯總(不同范圍、類型的隨機(jī)數(shù))
js產(chǎn)生隨機(jī)數(shù)通常是使用javascript的Math.random()函數(shù),下面這篇文章主要給大家介紹了關(guān)于JS生成隨機(jī)數(shù)的多種方法(不同范圍、類型的隨機(jī)數(shù))的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11JavaScript?error瀏覽器端錯(cuò)誤捕獲處理方法筆記解決示例
這篇文章主要為大家介紹了JavaScript?error瀏覽器端錯(cuò)誤捕獲處理方法筆記解決示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06BootStrap glyphicons 字體圖標(biāo)實(shí)現(xiàn)方法
字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。接下來通過本文給大家介紹BootStrap glyphicons 字體圖標(biāo)實(shí)現(xiàn)方法,需要的朋友參考下2016-05-05