在 JavaScript 中，异步编程一直是一个问题。ES6 引入了 Promise 来解决回调地狱的问题，但 Promise 也有自己的限制。ES7 引入了 async 和 await 来解决 Promise 的限制，使得异步编程更加简单、可读性更高。
async 和 await 简介
async 和 await 是 ES7 中的两个新关键字，它们像 Promise 一样用于异步编程。async 定义一个异步函数，返回一个 Promise 对象。await 可以放在 async 函数中的 Promise 前面，等待 Promise 完成并返回结果。
async 和 await 的出现是为了简化 Promise 的使用。使用 async 和 await 可以让异步代码看起来更像同步代码，提高代码可读性和可维护性。
async 函数
async 函数是一个返回 Promise 的函数。async 函数内部可以使用 await，它会等待 Promise 对象的完成，并返回 Promise 的结果。
下面是一个简单的例子：
async function fetchData() {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
}
fetchData().then(data => console.log(data));在上面的例子中，fetchData 是一个异步函数，它使用了 await 来等待 fetch 和 response.json() 方法的执行结果。fetch 方法是浏览器中的 API，用于发送网络请求，返回一个 Promise 对象。response.json() 方法也是返回一个 Promise 对象。
await 关键字
await 关键字只能在 async 函数中使用。它用于等待 Promise 对象完成，并返回 Promise 的结果。
下面是一个简单的例子：
async function test() {
const value = await Promise.resolve('Hello, world!');
console.log(value);
}
test(); // 输出：Hello, world!在上面的例子中，await 等待 Promise.resolve('Hello, world!') 的完成，并将返回值赋值给 value 变量。最后，输出 value 的值，即 'Hello, world!'。
async 和 await 的优点
使用 async 和 await 有以下几个优点：
- 更好的可读性：async 和 await 让异步代码看起来更像同步代码，使得代码更易于理解和维护。
- 更好的错误处理：使用 try/catch 可以更好地处理错误。如果 Promise 返回一个 rejected 状态，可以使用 try/catch 捕获错误。
- 更好的调试体验：使用 async 和 await 可以更容易地进行调试，因为可以像同步代码一样使用断点。
async 和 await 的注意事项
使用 async 和 await 时需要注意以下几个问题：
- await 只能在 async 函数中使用。
- await 只能等待 Promise 对象的完成，不能等待普通的函数或变量。
- async 函数始终返回一个 Promise 对象。
- await 只能在 async 函数中使用，不能在普通函数中使用。
总结
ES7 中的 async 和 await 是用于异步编程的新关键字。使用 async 和 await 可以让异步代码看起来更像同步代码，提高代码可读性和可维护性。使用 async 和 await 有以下几个优点：更好的可读性、更好的错误处理和更好的调试体验。在使用 async 和 await 时需要注意一些问题，如 await 只能在 async 函数中使用、await 只能等待 Promise 对象的完成等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66036851d10417a222fcaf79