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實現

• 接口調用的方法獨立封裝，參數可動態設置
• async聲明異步方法，內部使用await關鍵字調用封裝的接口，參數可直接傳入
• async/await相當於將Promise異步調用同步化，數據可實現關聯
• async/await會默認返回一個Promise對象，在實際調用中使用cache捕獲錯誤

代碼實現

<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>