async/await

最新推荐文章于 2024-01-11 22:20:22 发布

猪哥闲聊

最新推荐文章于 2024-01-11 22:20:22 发布

阅读量853

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/zcjxz135/article/details/117340764

版权

async/await是ES7引入的用于处理异步的语法糖，基于Promise构建。它允许开发者以同步的方式编写异步代码，提高代码可读性。async函数会返回一个Promise，内部的await会暂停函数执行直到Promise解析，简化了Promise的链式调用。但需要注意，不恰当的await使用可能导致不必要的阻塞，影响性能。异常处理则通过try...catch进行，避免未捕获的异常导致程序中断。

摘要由CSDN通过智能技术生成

上次我们大概说了一下 Promise ，今天就接着讲 async/await 这组 API 。

async/await 是 ES7 的标准，Promise 是 ES6 标准，async/await 这套 API 也是用来帮助我们写异步代码的，它是构建在 Promise 之上的，有点像 Okhttp 和 Retrofit 的关系。

什么是 async ？

async function myFirstAsyncFunction() {
   
  try {
   
    const fulfilledValue = await doSomeThing();
  }
  catch (rejectedValue) {
   
    // …
  }
}

大概长上面这个样子。async 一般不单独使用，而是和 await 一起使用，一个 async 函数内部可能有零个或者多个 await 。

这段代码即使没有学过 Promise 也很容易看懂。这就是 async 函数的优势所在。

async 函数被调用的时候，会立即返回一个 Promise。

await

await 不能单独使用，如果在非 async 函数内部被调用会报错。await 后面一般跟一个 Promise ，也可以是其他的，比如一个数值，或者一个变量，或者一个函数。如果 await 后面不是一个 Promise 就会返回一个已经 resolve 的 Promise。

当 async 函数执行到 await 的时候，会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于Promise 的异步操作被兑现或被拒绝之后才会恢复进程。

当然，async 函数也会返回一个 Promise ，也就是说，await 后面也可以跟一个 async 函数。

async/await 这套 API ，感觉有 Kotlin 中的协程和挂起函数内味。

为什么要使用 async ？

隐藏 Promise ，更易于理解

假设我们想请求一个接口，然后把响应的数据打印出来，并且捕获异常。用 Promise 大概是这样写：

function logFetch(url) {
   
  return fetch(url)
    .then(response => response.text())
    .then(text => {
   
      console.log(text);
    }).catch(err => {
   
      console.error(