async 和 await

Posted pengwf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了async 和 await相关的知识,希望对你有一定的参考价值。

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. 在调试打断点是更为方便

以上是关于async 和 await的主要内容,如果未能解决你的问题,请参考以下文章

promise与async和await的区别

async和await用法

Async/Await替代Promise的理由

如何优雅处理 async await 错误——解读小而美的 awaitjs 库

Async/Await是这样简化JavaScript代码的

C# 使用Awaiter