随着前端应用的复杂度不断提高，异步编程已经成为了前端开发中不可避免的问题。而 ES7 中新增的 await 表达式则为我们解决了一些异步编程中的痛点，使得异步编程变得更加简单和优雅。
什么是 await 表达式
在 ES7 中，我们可以使用 await 关键字来等待一个异步操作的完成，然后将其结果返回。在使用 await 表达式时，我们需要将其包裹在一个 async 函数中，这样才能正确运行。
下面是一个简单的示例，展示了如何使用 await 表达式来等待一个 Promise 的结果：
// javascriptcn.com 代码示例
async function getData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
}
getData().then(data => {
console.log(data);
});在上面的代码中，我们定义了一个名为 getData 的 async 函数，它使用 await 表达式来等待 fetch 方法返回的 Promise 对象。一旦 Promise 对象成功返回，await 表达式会将其结果存储在 response 变量中。然后，我们再次使用 await 表达式来等待 response.json() 方法返回的 Promise 对象。最终，我们将结果返回给调用者。
为什么使用 await 表达式
使用 await 表达式可以使异步编程变得更加简单和优雅。在使用传统的回调函数或者 Promise 链时，我们需要不断地嵌套回调函数或者使用 .then() 方法来处理异步操作的结果。这样的代码显得非常冗长和难以维护。
而使用 await 表达式，则可以将异步代码写成类似于同步代码的形式，使得代码更加清晰易懂。同时，await 表达式还能够避免回调地狱和 Promise 链的问题，使得异步代码的逻辑更加清晰。
注意事项
虽然 await 表达式可以使异步编程变得更加简单和优雅，但是在使用时还需要注意一些问题。
首先，await 表达式只能在 async 函数中使用。如果我们在普通函数中使用 await 表达式，会导致语法错误。
另外，await 表达式只能等待 Promise 对象的完成。如果我们使用 await 表达式等待一个非 Promise 对象，会导致运行时错误。
最后，我们需要注意 await 表达式的执行顺序。在一个 async 函数中，如果我们使用了多个 await 表达式，它们会按照顺序依次执行。也就是说，只有当前一个 await 表达式执行完成后，才会执行下一个 await 表达式。
总结
ES7 中的 await 表达式为前端开发中的异步编程问题提供了更加优雅和简单的解决方案。使用 await 表达式，我们可以将异步代码写成类似于同步代码的形式，使得代码更加清晰易懂。同时，我们还需要注意 await 表达式的使用规则，避免出现语法错误和运行时错误。
在实际项目中，我们可以结合 Promise 和 await 表达式，使用 async/await 的方式来编写异步代码，使得代码更加简洁和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e71c395b1f8cacd7980bf