在 JavaScript 中，异步编程已经成为了一种必要的技能。在 ES6 中，我们可以通过 Promise 来实现异步操作，但是我们仍然需要手动处理回调函数、错误处理以及一些其他问题。ES8 引入了一种新的异步编程方式，async/await，可让我们编写更简洁、易读和可维护的异步代码。
async/await 初探
async 和 await 是 two keywords，是一种新的 language feature，实现了异步编程的一种新方式，在 ES7 中已经被标准化，并在 ES8 中成为了默认选项。
async 函数返回一个 Promise 对象，可以使用 then 方法进行异步操作。await 操作符可以在 async 函数中等待异步操作完成后返回结果值，而不必使用回调函数或者 then 方法。
以下是一个简单的例子：
async function asyncFn() {
const result = await fetch('https://api.github.com/users/octocat');
const data = await result.json();
return data;
}
asyncFn().then(data => console.log(data));这段代码调用了 fetch 方法获取 GitHub 上用户名为 octocat 的信息。fetch 方法返回一个 Promise 对象，在执行 async 函数体之前，await 停止函数的执行直到 Promise 对象返回 fulfilled 状态并返回数据，而不是 Promise 对象本身，因此我们可以将数据直接存储在一个 data 变量中，使代码易于阅读和理解。
实例详解
如何在需要执行多个异步操作的情况下使用 async/await？我们可以使用 Promise.all() 方法。
async function asyncFn() {
const [user_response, repo_response] = await Promise.all([
fetch('https://api.github.com/users/octocat'),
fetch('https://api.github.com/users/octocat/repos')
]);
const user_data = await user_response.json();
const repo_data = await repo_response.json();
return { user: user_data, repo: repo_data };
}
asyncFn().then(data => console.log(data));首先，我们使用了 Promise.all() 方法来同时调用两个 API。在 Promise.all() 返回 resolve 时，我们可以使用解构的方式获取两个 API 的返回值，并分别存储在 user_response 和 repo_response 变量中。
接下来，我们使用 await 关键字获取 user_response 和 repo_response 的 json data，并将其存储在 user_data 和 repo_data 变量中。
最后，我们将 user_data 和 repo_data 组合成一个对象并通过 console.log() 打印出来。
异常处理
async/await 还提供了更方便的错误处理方式。在 async 函数中，我们可以使用 try 和 catch 语句捕捉异步函数中的错误。这种方式比在 Promise 对象中使用 catch 语句更加简单和直接。
async function asyncFn() {
try {
const response = await fetch('https://api.github.com/404');
const data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
asyncFn();在这个例子中，我们使用了 try 和 catch 语句来处理异常情况。如果 fetch 方法返回的状态码是 404， await 将会抛出一个异常，并将它存储在变量 error 中。我们直接使用 console.log() 方法输出这个异常，而不必将其传递给 catch() 方法中。
总结
async/await 是 ES8 中的一个新特性，提供了比 Promise 更加简单和易读的方式来处理异步操作。async 函数使用 Promise 来等待异步操作完成，await 关键字可以使用在只有 async 函数内的 Promise 对象前面。async/await 还提供了更加方便和直接的错误处理方式，来帮助我们编写更易于维护的异步代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a5ea75add4f0e0ffe7d2ce