async/await多個函數(shù)關(guān)聯(lián)調(diào)用

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

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

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

async聲明一個異步函數(shù)

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

所以在模擬異步調(diào)用函數(shù)時，函數(shù)體內(nèi)返回promise

async/await缺點

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

實現(xiàn)

項目中實現(xiàn)三個不同的接口調(diào)用，三個接口是相互關(guān)聯(lián)的，前一個接口的返回值是后一個接口的參數(shù)，如果使用Promise實現(xiàn)的話，只能實現(xiàn)異步調(diào)用，但是無法相互關(guān)聯(lián)，也就是數(shù)據(jù)不互通，所以使用async/await實現(xiàn)

• 接口調(diào)用的方法獨立封裝，參數(shù)可動態(tài)設(shè)置
• async聲明異步方法，內(nèi)部使用await關(guān)鍵字調(diào)用封裝的接口，參數(shù)可直接傳入
• async/await相當(dāng)于將Promise異步調(diào)用同步化，數(shù)據(jù)可實現(xiàn)關(guān)聯(lián)
• async/await會默認(rèn)返回一個Promise對象，在實際調(diào)用中使用cache捕獲錯誤
  

代碼實現(xiàn)

<script>
 //再此使用定時器模擬異步接口的調(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í)行三個關(guān)聯(lián)的異步函數(shù)
 async function d(){
   const da = await a();
   const db = await b(da);
   const dc = await c(db);
   return dc;
 }

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

總結(jié)

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

最新評論