ES7 中使用 async await 简化异步操作-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 应用程序不断变得复杂，异步操作已经成为前端开发中不可缺少的部分。JavaScript 在异步操作方面一直表现不错，但是回调地狱和 Promise 的链式调用也让开发者不太满意。ES7 引入了 async/await 语法，可以更加轻松和清晰地处理异步操作。

async/await 的基础知识

async

async 函数是声明异步操作的方式，它返回一个 Promise 对象。async 函数在处理过程中遇到 await 表达式时，暂停函数执行，等待 Promise 对象 resolve，然后继续执行。async 函数语法如下：

async function functionName() {
  // function body
}

await

await 表达式只能用于 async 函数中，它等待 Promise 的 resolve 并返回 Promise 的结果。它会暂停整个 async 函数，直到 Promise resolve，然后继续执行后面的代码。await 表达式语法如下：

const result = await promise;

promise：Promise 对象。

示例代码

-- -------------------- ---- -------
-------- ----------- -
  ------ --- --------------- --
    ------------- -- ------------- ---- --------- -----
  --
-

----- -------- --------- -
  ---------------------
  ----- ---- - ----- ------------
  ------------------
  -------------------
-

----------展开代码

在上面的示例中，fetchData() 返回一个 Promise 对象，模拟了从服务器获取数据的过程，并模拟了 2 秒的延迟。getData() 声明为 async 函数，使用 await 关键字暂停函数的执行，等待 fetchData() 返回的 Promise resolve 后，获取数据并打印日志，最后打印结束日志。

async/await 的使用场景

async/await 是处理异步请求的一种方式，在以下场景中适用：

1. 处理多个依赖的异步操作

如果有多个异步请求互相依赖，按顺序处理这些请求可以使业务代码变得冗长。使用 async/await 就可以方便地串行处理这些异步依赖。

async function getData() {
  const user = await fetchUser();
  const posts = await fetchPosts(user);
  const comments = await fetchComments(posts);
  const likes = await fetchLikes(posts);
  // do something
}

在上面的示例中，数据获取请求是串行的。因为 await 关键字暂停函数执行，所以我们可以直接使用已获取到的结果，让后续的操作变得更加容易。

2. 充分利用异步代码的执行效率

异步代码之所以高效，是因为异步请求可以在后台继续执行，不会阻塞代码的执行。使用 async/await 时，我们可以将多个异步请求并行执行，并等待它们所有都 resolve 后再进行其他操作。

async function getData() {
  const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);
  const [comments, likes] = await Promise.all([fetchComments(posts), fetchLikes(posts)]);
  // do something
}

在上面的代码中，使用了 Promise.all() 方法来将多个异步请求并行执行。在多个请求 resolve 之后，我们才会获取所有的结果进行下一步操作。

注意事项

1. async/await 不是银弹！

async/await 在某些情况下会使代码变得更加简洁和易读。但是我们仍然需要处理错误，我们仍然需要超时控制，仍然需要请求队列控制等等，且不说在有些情况下使用 Promise 可能更为便捷。所以，async/await 虽然是 JavaScript 异步代码处理的一种新方式，但是并不是万能的银弹，我们需要权衡其优缺点并根据实际情况进行选择。

2. 不要忘记错误处理

async 函数返回的 Promise 对象可能会被 reject，我们需要记得捕获错误并处理。

async function getData() {
  try {
    const data = await fetchData();
    // do something
  } catch(error) {
    console.error(error);
  }
}

在上面的代码中，使用了 try...catch... 语句来捕获 Promise 的错误并处理。

总结

async/await 为 JavaScript 异步请求操作的处理带来了便利，它可以更加清晰且简洁地处理异步请求。但是我们也需要注意一些细节和不足，权衡其优缺点根据实际情况进行选择，使用正确的工具解决正确的问题会让我们的代码更加优雅和可读。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65a5b944add4f0e0ffe48587

ES7 中使用 async await 简化异步操作