ES7 中的 async/await 关键字使用详解-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 的 ES7 新版本中，新增了 async/await 关键字，用于简化基于 Promise 的异步编程。这一新特性极大地提高了 JavaScript 的可读性和可维护性，让并发任务的执行变得更为简单、直观。

异步编程的痛点

在 JavaScript 中，异步编程是一项必要的技能。在处理浏览器中的各种操作，例如 AJAX 请求、定时器等等时，JavaScript 引擎必须先执行完当前任务才能继续执行后续任务。这导致了异步编程的流程通常是回调函数的方式，代码阅读起来非常繁琐和不可读。例如：

fetch('https://api.github.com/users/octocat').then(function(response) {
  return response.json();
}).then(function(json) {
  console.log('GitHub 用户名：', json.name);
}).catch(function(error) {
  console.error('发生错误！', error);
});

虽然这样的异步方式看起来不太友好，但是当我们面对多个异步调用嵌套的时候，代码的可读性将会更加糟糕。

async/await 的作用

async/await 关键字是 ES7 中的一种新特性，它能够大大简化异步编程的过程，让我们能够以同步的方式来编写异步代码。通俗地说，就是让那些结局异步编程中"回调地狱"的代码看上去就像普通的同步代码一样，从而大大提高代码的可读性和可维护性。

async 函数只需要在定义函数体的前面添加一个 async 关键字即可，await 则只需在异步操作的前面添加即可。例如：

async function fetchGithub() {
  const response = await fetch('https://api.github.com/users/octocat');
  const json = await response.json();
  console.log('GitHub 用户名：', json.name);
}

上述代码中，我们定义了一个名为 fetchGithub 的 async 函数，内部使用了两次 await，分别用于在 API 返回时才接着运行函数。由此可见，使用 async/await 时可以将 Promise 的回调方式消除。

async/await 的流程

虽然 async/await 代码简单，但它的工作流程还是有细微差别的。async 函数会在执行函数时自动返回一个 Promise 对象。在返回的 Promise 对象中，如果 async 函数执行无故失败，那么 Promise 对象就会变成 reject 状态。否则 Promise 将返回 async 函数的返回值，如果 async 函数只是简单地返回一个值，那么 Promise 对象也将返回该值。任何 Promise 中的异常都可以使用 try/catch 来捕获。

// javascriptcn.com 代码示例
async function foo() {
  return 'foo';
}

foo().then(result => {
  console.log(result); // 输出 'foo'
});

async function bar() {
  throw new Error('something wrong');
}

bar().catch(error => {
  console.error(error); // 输出 'something wrong'
});

async/await 和 Promise 的比较

虽然 async/await 关键字已经大大简化了异步代码的编写，但是它还是基于 Promise 的。实际上，async/await 是 Promise 的语法糖，既可以使用 async/await，也可以直接使用 Promise 编写异步代码。以下代码可以帮助我们对比时使用 async/await 和 Promise：

// javascriptcn.com 代码示例
// 使用 async/await
async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
}

// 使用 Promise
function getDataPromise() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json());
}

从上面我们可以发现，使用 async/await 可以让异步代码变得更简单易读。我们可以通过类似“同步式”的代码去处理异步调用，而且代码量也更少更清晰。

异步编程的最佳实践

最后我们来分享一下异步编程的最佳实践。下面这个例子清晰地演示了如何利用 JavaScript 中丰富的异步 API 来实现顺序的异步流程：

// javascriptcn.com 代码示例
async function run() {
  try {
    const result1 = await step1();
    const result2 = await step2(result1);
    const result3 = await step3(result2);
    console.log(result3);
  } catch (err) {
    console.log(err);
  }
}

function step1() {
  return new Promise(resolve => setTimeout(() => {
    console.log('step1');
    resolve(1);
  }, 1000));
}

function step2(result1) {
  return new Promise(resolve => setTimeout(() => {
    console.log('step2');
    resolve(2 * result1);
  }, 1000));
}

function step3(result2) {
  return new Promise(resolve => setTimeout(() => {
    console.log('step3');
    resolve(3 * result2);
  }, 1000));
}

这段代码中，使用了 run 方法作为异步流程的启动函数，该函数下调用了三个异步方法。每个异步调用都是基于 Promise 的，因此可以使用 await。执行步骤非常简单，因为每个步骤都基本相同。在每个异步操作完成后，我们使用 resolve 去通知程序下一步的执行，以及 reject 来处理异常。try/catch 则用于捕捉可能出现的异常。

总结

在 JavaScript 异步编程中，async/await 关键字已经成为了我们必备的工具。这些简单和容易上手的功能是通过 Promise 的扩展得到的。使用 async/await，我们开始将 Promise 编程变得更加简单和直观。

当然，async/await 并不是用于所有异步操作的“万灵药”——像事件和流这样的异步模式仍然需要单独考虑。但它在许多常见的异步场景中，比如与服务器端的通信，都是非常有用的。需要注意的是，async/await 还需要 ECMAScript 2017 的支持，因此对于那些使用更旧版本 JavaScript 引擎或受制于早期 ECMAScript 标准的程序员，就需要专注于其替代解决方案，例如使用 Promise 编写异步代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654457697d4982a6ebe380c6