async 和 await

Posted 2020-12-17 pengwf

async 和 await

Async/await 在 NodeJS 7.6 引入，当前已被所有现代浏览器支持。

简介

• async/await 是一种新的使用异步代码的方式，代替之前回调或者 promise 的方式。
• 是基于 promise 的语法糖，无法在普通的回调函数中使用，await 必须在 async 方法中调用。
• 和 promise 一样是无阻塞的。

异步

当我们用 promise 实现异步时

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

makeRequest()

当我们用 async/await 实现时

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()

1. await 关键字只能用于 async 关键字的方法内，
2. 所以我们无法在顶级文件中使用 await/async

优点

1. 代码简洁直观，我们不用使用 then 关键字，创建匿名函数处理返回，避免了嵌套代码。

2. 错误处理，async/await 让我们可以将同步和异步代码的错误放在一块处理，不需要再传递错误处理函数。

3. 控制流，当我们考虑 then 中直接返回数据，或者根据数据的值，发起进一步处理，再返回数据时，极易容易在多层嵌套中迷失。

   Promise :

   const makeRequest = () => {
     return getJSON()
       .then(data => {
         if (data.needsAnotherRequest) {
           return makeAnotherRequest(data)
             .then(moreData => {
               console.log(moreData)
               return moreData
             })
         } else {
           console.log(data)
           return data
         }
       })
   }
   

   Async/await

   const makeRequest = async () => {
     const data = await getJSON()
     if (data.needsAnotherRequest) {
       const moreData = await makeAnotherRequest(data);
       console.log(moreData)
       return moreData
     } else {
       console.log(data)
       return data    
     }
   }
   

4. 中间值，不用再 then 式调用中传递中间值到最后一个 then

   const makeRequest = () => {
     return promise1()
       .then(value1 => {
         // do something
         return Promise.all([value1, promise2(value1)])
       })
       .then(([value1, value2]) => {
         // do something          
         return promise3(value1, value2)
       })
   }
   

   const makeRequest = async () => {
     const value1 = await promise1()
     const value2 = await promise2(value1)
     return promise3(value1, value2)
   }
   

5. 错误堆栈，当链式 then 时，捕捉到的异常很难判断是哪一个 then 抛出

6. 在调试打断点是更为方便