JS中async/await實現異步調用的方法

async/await多個函數關聯調用

async/await使得異步代碼看起來像同步代碼

async函數會隱式地返回一個promise，而promise的reosolve值就是函數return的值

Async/Await不需要寫.then，不需要寫匿名函數處理Promise的resolve值，也不需要定義多余的data變量，還避免了嵌套代碼

async聲明一個異步函數

await只能在async函數中使用，后面跟一個promise對象

所以在模擬異步調用函數時，函數體內返回promise

async/await缺點

async函數里，無論是Promise reject的數據還是邏輯報錯，都會被默默吞掉。所以最好把await放入try{}catch{}中，或者在async返回的promise對象中使用.cache捕獲錯誤。

實現

項目中實現三個不同的接口調用，三個接口是相互關聯的，前一個接口的返回值是后一個接口的參數，如果使用Promise實現的話，只能實現異步調用，但是無法相互關聯，也就是數據不互通，所以使用async/await實現

代碼實現

<script>
 //再此使用定時器模擬異步接口的調用
 // 異步函數a
 function a() {
 return new Promise(resolve => {
 setTimeout(()=>{
 resolve('a')
 }, 1000)
 })
 }
 // 異步函數b,關聯a參數
 function b(a) {
 return new Promise(resolve => {
 setTimeout(()=>{
 resolve(a+'b')
 }, 1000)
 })
 }
 // 異步函數c，關聯b參數
 function c(b) {
 return new Promise(resolve => {
 setTimeout(()=>{
 resolve(b+'c')
 }, 1000)
 })
 }

 // 同步執行三個關聯的異步函數
 async function d(){
 const da = await a();
 const db = await b(da);
 const dc = await c(db);
 return dc;
 }

 // 實際調用
 d().then(res=>{
 console.log(res)
 }).catch(err=>{
 console.log(err)
 });
</script>

總結

以上所述是小編給大家介紹的JS中async/await實現異步調用的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com