ES8 中的 async/await 从 Promise 更远，让异步操作更为专业
在前端开发中，异步操作是非常常见的，例如发送请求、获取数据等。在 ES6 中，Promise 已经成为了处理异步操作的标准。而在 ES8 中，新增的 async/await 则更进一步地简化了异步操作的处理，使得代码更为清晰易懂。
async/await 的优点
相比于 Promise，async/await 的优点主要有以下几个：
- 代码更加简洁易懂
async/await 可以让异步代码看起来像同步代码一样，使得代码更加清晰易懂。例如，下面是一个使用 Promise 处理异步操作的示例：
fetch('https://api.github.com/users/github')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))而使用 async/await 则可以将其简化为：
// javascriptcn.com 代码示例
async function getData() {
try {
const response = await fetch('https://api.github.com/users/github');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}- 错误处理更加方便
使用 async/await 可以更加方便地处理异步操作中的错误。在 Promise 中，错误处理通常需要使用 catch() 方法。而在 async/await 中，可以使用 try-catch 语句来进行错误处理，使得代码更加简洁易懂。
- 更加专业
async/await 可以让异步操作更加专业，使得代码更加可读、可维护。同时，使用 async/await 可以减少异步操作的嵌套层数，提高代码的可读性和可维护性。
async/await 的用法
在使用 async/await 时，需要注意以下几点：
- async 函数返回一个 Promise 对象
async 函数返回一个 Promise 对象，可以使用 then() 方法来获取异步操作的结果。
- await 只能在 async 函数中使用
await 只能在 async 函数中使用，否则会报错。
- await 后面跟着一个 Promise 对象
await 后面必须跟着一个 Promise 对象，否则会报错。如果 await 后面的 Promise 对象被 reject 了，则会抛出一个错误。
- try-catch 语句可以用来处理错误
可以使用 try-catch 语句来处理异步操作中的错误。
下面是一个使用 async/await 处理异步操作的示例：
// javascriptcn.com 代码示例
async function getData() {
try {
const response = await fetch('https://api.github.com/users/github');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
getData();在上面的示例中，使用 async/await 来获取 GitHub 用户的信息。首先使用 fetch() 方法发送请求，然后使用 await 等待响应结果，最后将响应结果转换为 JSON 格式并输出到控制台中。
总结
async/await 是 ES8 中新增的处理异步操作的方法，相比于 Promise，它更加简洁易懂，错误处理更加方便，使得异步操作更加专业。在实际开发中，使用 async/await 可以使得代码更加清晰易懂，提高代码的可读性和可维护性。
参考代码：
// javascriptcn.com 代码示例
async function getData() {
try {
const response = await fetch('https://api.github.com/users/github');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
getData();来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6559f20bd2f5e1655d459d29