在 ECMAScript 2017 中，引入了一种新的语法糖“async/await”，这使得异步编程变得更加简单和易于理解。异步编程是现代前端开发中不可避免的一部分，而“async/await”的出现，让我们的代码更加清晰、易于维护。
什么是 async/await
“async/await” 是异步编程的一种新的语法糖，它使得异步代码看起来像同步代码，但实际上仍然是异步执行的。通过使用“async/await”，我们可以避免使用回调函数和 Promise 链式调用的繁琐操作。
async/await 的基本用法
在使用“async/await”之前，我们需要先了解两个概念：async 和 await。
async
async 是一个关键字，用于定义一个函数为异步函数。异步函数会返回一个 Promise 对象，而不是直接返回函数的返回值。
async function foo() {
return 'hello world';
}
foo().then(console.log); // 输出 "hello world"await
await 也是一个关键字，用于等待一个异步操作的完成。当遇到 await 关键字时，JavaScript 引擎会暂停当前函数的执行，直到异步操作完成并返回结果。
async function foo() {
const result = await someAsyncOperation();
console.log(result);
}在上面的代码中，调用 someAsyncOperation() 是一个异步操作，当遇到 await 关键字时，foo 函数会被暂停，直到 someAsyncOperation() 返回结果。一旦结果返回，foo 函数会继续执行，并且将结果存储在 result 变量中。
async/await 的实现原理
了解了 async 和 await 的基本用法之后，我们来看看它们的实现原理。在 JavaScript 引擎中，async/await 实际上是基于 Promise 实现的。在一个 async 函数中，所有的 return 语句都会被包装成一个 Promise 对象，而 await 关键字会等待一个 Promise 对象的完成。
下面是一个简单的例子，演示了 async/await 的实现原理：
async function foo() {
const result = await Promise.resolve('hello world');
console.log(result);
return 'done';
}
foo().then(console.log); // 输出 "hello world" 和 "done"在上面的代码中，foo 函数会返回一个 Promise 对象。当调用 foo 函数时，JavaScript 引擎会执行函数体内的代码，遇到 await 关键字时，会等待 Promise.resolve('hello world') 的完成。一旦 Promise 对象完成，foo 函数会继续执行，并且将结果存储在 result 变量中。最后，foo 函数会返回一个 Promise 对象，这个 Promise 对象的结果是 done。
async/await 的指导意义
async/await 的出现，使得异步编程变得更加简单和易于理解。通过使用 async/await，我们可以避免使用回调函数和 Promise 链式调用的繁琐操作。此外，async/await 还能够帮助我们更好地处理异步操作的错误。在一个 async 函数中，我们可以使用 try/catch 语句来捕获异步操作中的错误，而不是使用 Promise 中的 catch 方法。
下面是一个例子，演示了如何使用 async/await 处理异步操作的错误：
async function foo() {
try {
const result = await someAsyncOperation();
console.log(result);
} catch (error) {
console.error(error);
}
}在上面的代码中，我们使用 try/catch 语句来捕获 someAsyncOperation() 异步操作中的错误。如果操作成功完成，我们会将结果存储在 result 变量中，并打印到控制台。如果操作出现错误，我们会使用 console.error() 方法打印错误信息。
总结
通过本文的介绍，我们了解了 ECMAScript 2017 中的 async/await 语法糖，并深入了解了它们的实现原理。async/await 的出现，使得异步编程变得更加简单和易于理解，同时也能够帮助我们更好地处理异步操作的错误。在实际开发中，我们应该多加利用 async/await，来写出更加简洁、易于维护的异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509446f95b1f8cacd4014c8