异步编程 ——ES7 的异步操作-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步编程一直是一个比较重要的概念。它可以让我们处理诸如网络请求、动画效果等等耗时操作时更高效、更优雅。而 ES7 引入的新的异步语法——async/await，则更加方便我们编写异步代码，让异步操作变得更加简单易读。

异步编程

我们知道 JavaScript 是单线程的，它只能执行一次任务，而任何一次任务都只有在前一次任务结束后才能开始执行。因此在 JS 中运用异步编程技术是至关重要的，这样才能兼顾代码的能力与效率。异步编程的核心思想就是把代码逻辑分为两部分，一部分为主线程逻辑，另一部分是副线程，副线程通常是由 IO 操作、定时器任务等所触发的。

在 ES6 之前，我们通常使用回调函数和 Promise 来实现异步编程。而在 ES7 中推出的 async/await 则更易于编写复杂的异步操作代码。

async/await

async/await 是一种对于 Promise 的更高层次的抽象。它的主要目的在于简化异步操作的流程，使得异步代码看起来像同步代码。async/await 实际上是基于 Promise 来实现的，它可以让我们像编写同步代码一样编写异步链式调用流程，避免了深层嵌套回调函数的痛苦。

“async” 函数

async 关键字是用来定义异步函数的，该函数返回一个 Promise 对象。一个 async 函数的语法结构如下：

async function foo() {
  // code
}

在 async 函数内部，可以使用 await 关键字来等待一个返回 Promise 对象的函数或表达式执行完成。在等待完成的同时，主线程可以继续执行其他操作。一旦完成后，await 会将执行上下文转移到 Promise 返回的结果。

async function foo() {
  const result = await bar();
  // code
}

在上述代码中，主线程会等待 bar() 函数返回 Promise 的结果后再执行下一步操作。

“await” 关键字

将 await 关键字放在返回 Promise 的函数之前，可以使得函数等待 Promise 执行完成，并返回执行结果。await 关键字只能用在 async 函数内部，否则将会报错。

async function foo() {
  const result = await Promise.resolve("Hello World!");
  console.log(result); // -> "Hello World!"
}

在上述代码中，我们可以看到通过 await 关键字，将 Promise.resolve() 的执行结果存储到 result 变量中，并输出结果。

错误处理

当 await 后面的 Promise 失败时，会抛出异常，这时可以通过 try-catch 块来进行捕获和处理：

async function foo() {
  try {
    const result = await Promise.reject("error!");
  } catch (err) {
    console.log(err); // -> error!
  }
}

示例代码

我们用一个简单的例子来演示 async/await 的使用。假设我们有一个获取用户信息的函数 getUserInfo()，该函数返回一个 Promise 对象。我们想要在调用该函数的同时获取用户的账号金额信息，并输出账号余额信息：

async function getUserBalance() {
  const userInfo = await getUserInfo(); // 等待 getUserInfo() 函数返回 Promise
  const balance = await getBalance(userInfo.userId); // 等待 getBalance() 函数返回 Promise
  console.log(`User ${userInfo.name} has a balance of $${balance}`);
}

在上述代码中，我们定义了一个 getUserBalance() 函数，该函数先调用 getUserInfo() 函数获取用户信息，再调用 getBalance() 函数获取账户余额信息，在两个异步操作都成功完成后，输出账户余额的信息。

结语

async/await 语法虽然不能完全取代其他异步编程方式，但是它可以使异步编程变得更加简单明了，代码可读性更强，出错率更低。在实际开发过程中，加深并掌握了解它能帮助你写出更出色的代码。

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

异步编程 ——ES7 的异步操作