在 JavaScript 中，异步操作是非常常见的，例如网络请求、文件读写、定时器等等。在 ES6 中，引入了 async 和 await 关键字，极大地简化了异步操作的写法，让代码更加简洁易懂。本文将详细介绍 async 和 await 的使用方法，帮助读者更好地理解和应用这两个关键字。
async 和 await 是什么
async 和 await 是 ES6 中的两个关键字，用于处理异步操作。其中，async 用于定义一个异步函数，它返回一个 Promise 对象；await 用于等待一个 Promise 对象的结果，并返回该结果。简单来说，async 和 await 就是 Promise 的语法糖，使得异步操作的代码更加简洁易懂。
async 函数的使用
async 函数是一个异步函数，它的返回值是一个 Promise 对象，可以使用 then() 方法获取异步操作的结果。下面是一个简单的例子：
async function getData() {
const response = await fetch('https://api.github.com/users/github');
const data = await response.json();
console.log(data);
}
getData();在上面的代码中，我们定义了一个名为 getData 的异步函数，它使用 fetch 方法获取了 GitHub 用户信息的 JSON 数据，然后打印出来。在函数内部，我们使用了 await 关键字等待异步操作的结果，并将结果存储在 data 变量中。注意，我们必须在函数定义前面加上 async 关键字，否则无法使用 await 关键字。
await 的使用
await 关键字用于等待一个 Promise 对象的结果，并返回该结果。如果 Promise 对象的状态为 resolved，那么 await 关键字会返回 Promise 对象的结果；如果 Promise 对象的状态为 rejected，那么 await 关键字会抛出 Promise 对象的错误。下面是一个简单的例子：
async function getData() {
const response = await fetch('https://api.github.com/users/github');
const data = await response.json();
return data;
}
getData().then(data => console.log(data));在上面的代码中，我们定义了一个名为 getData 的异步函数，它使用 fetch 方法获取了 GitHub 用户信息的 JSON 数据，并将其返回。在函数外部，我们使用 then() 方法获取异步操作的结果，并打印出来。
async 和 await 的错误处理
在异步函数中，我们可以使用 try...catch... 语句来捕获异步操作的错误。下面是一个简单的例子：
// javascriptcn.com 代码示例
async function getData() {
try {
const response = await fetch('https://api.github.com/users/github');
const data = await response.json();
return data;
} catch (error) {
console.log(error);
}
}
getData().then(data => console.log(data));在上面的代码中，我们使用 try...catch... 语句来捕获异步操作的错误。如果异步操作出现错误，那么 catch 语句会捕获该错误，并打印出来。注意，我们必须在异步函数内部使用 try...catch... 语句来捕获错误，否则在函数外部无法捕获错误。
async 和 await 的嵌套使用
在异步函数中，我们可以使用 async 和 await 关键字来嵌套调用其他异步函数。下面是一个简单的例子：
// javascriptcn.com 代码示例
async function getData() {
const response = await fetch('https://api.github.com/users/github');
const data = await response.json();
return data;
}
async function getAvatar() {
const data = await getData();
const response = await fetch(data.avatar_url);
const blob = await response.blob();
return URL.createObjectURL(blob);
}
getAvatar().then(url => console.log(url));在上面的代码中，我们定义了两个异步函数：getData 和 getAvatar。在 getAvatar 函数内部，我们使用 await 关键字等待 getData 函数的结果，然后使用该结果获取用户头像的数据，并将其转换成 URL。在函数外部，我们使用 then() 方法获取异步操作的结果，并打印出来。
总结
async 和 await 是 ES6 中的两个关键字，用于处理异步操作。其中，async 用于定义一个异步函数，它返回一个 Promise 对象；await 用于等待一个 Promise 对象的结果，并返回该结果。在异步函数中，我们可以使用 try...catch... 语句来捕获异步操作的错误。同时，我们也可以使用 async 和 await 关键字来嵌套调用其他异步函数，使得代码更加简洁易懂。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657c0929d2f5e1655d6c72f2