溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么在JavaScript中使用async和await實(shí)現(xiàn)異步調(diào)用

發(fā)布時(shí)間:2021-03-10 16:03:10 來源:億速云 閱讀:195 作者:Leah 欄目:web開發(fā)

今天就跟大家聊聊有關(guān)怎么在JavaScript中使用async和await實(shí)現(xiàn)異步調(diào)用,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。

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>

看完上述內(nèi)容,你們對(duì)怎么在JavaScript中使用async和await實(shí)現(xiàn)異步調(diào)用有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI