ECMAScript 2017 的 async/await 方法的原理和使用方法
编写异步代码是前端开发中经常遇到的问题。在过去，我们通常使用回调或者Promise作为解决方案，但这些方法对于初学者来说并不是很直观，而且存在一些问题。幸运的是，ES2017引入了async/await方法，为我们提供了一种更为简洁，易懂和功能更强大的解决方案。本文将以详细的方式介绍async/await的原理和使用方法，并教你如何在代码中使用它。
原理
async/await的原理基于ES6引入的Promise概念。async函数返回一个Promise对象，该Promise对象表示异步操作的最终完成，async函数内部可以使用await关键字等待Promise对象的解析。
async函数的返回值为Promise.resolve()类型，如果async中存在异常会被自动包装成reject类型。当await调用的Promise对象状态变为resolved，则await表达式返回的值就是Promise对象resolve的值，反之直接抛出reject的异常。
使用方法
async函数有一些特殊的声明语法。首先，在函数参数前面添加async关键字，将async标记为异步函数：
----- -------- ----- - -- ---- -
接下来，使用await等待一个异步操作完成：
----- -------- ----- - ----- ------ - ----- --------------------- -------------------- -
当调用someAsyncOperation()函数时，它将返回一个Promise对象。使用await关键字等待该Promise对象的解析。当Promise对象解析后，await将拿到Promise对象，将其成功时的结果返回结果给变量result。如果Promise对象被拒绝，则await强制抛出异常。请注意，在async函数中，你不需要调用.then()和.catch()，因为async/await将代码的控制权转移给异步代码。
与 Promise 搭配使用
async/await方法可以很方便地与Promise搭配使用。例如，下面的代码使用Promise对象演示了如何获取数据。然后我们将使用async/await方法来重写它：
-------- --------- -
------ --------------
-------------- -- -
------ ----------------
---
-
----- -------- --------- -
----- -------- - ----- ---------------
----- ---- - ----- ----------------
------ -----
-在第二个例子中，使用async和await把代码重构成更好的形式。fetch()返回一个Promise对象，然后我们使用await等待该Promise对象。一旦Promise对象解析，await表达式将返回Promise对象resolve的值。在此示例中，我们使用await和JSON API来解析JSON数据。
async/await的思考方式
async/await方法可以大大简化异步编程，而且可读性非常好。它是避免Pyramid of Doom嵌套代码的一种方法。使用async/await的代码带来了更好的可读性和维护性。因为它允许程序员将异步事件与其他异步事件组合在一起，更容易编写和调试。
结论
async/await是ES2017引入的新特性，使异步编程更加方便。本文通过详细的方式介绍了async/await的原理和使用方法，并给出了与Promise搭配使用的示例。它使得异步编程变得更简单，可读性更高，并且使代码更容易维护和测试。如果您还没有使用async/await，那么现在是时候学习并开始使用这个强大的JavaScript新特性了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672d9798eedcc8a97c85635b