在 JavaScript 的异步编程中，Promise 已经成为了一个非常常见的用于处理异步操作的技术。然而，当我们需要在 Promise 链中等待一个 Promise 执行完成之后再执行下一步操作时，ES10 中新增的 await 运算符就显得十分方便和实用了。
await 的基本用法
在异步函数（async function）中使用 await 可以让该异步函数等待 Promise 执行完成后再继续执行下一步操作。await 运算符会暂停异步函数的执行，直到 Promise 执行完成并返回其结果，然后将 Promise 的执行结果作为 await 表达式的返回值，再继续执行后面的代码。
下面是一个简单示例，用于展示 await 的基本用法：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ------ - ----- --- ----------------- ------- -- - ------------- -- - ----------------- -- ------ --- -------------------- - ------------展开代码
在上面的示例中，我们定义了一个异步函数 asyncFunc，其中定义了一个 Promise，它在 1 秒后将其状态设置为已解决，并返回一个字符串 'done!'。我们将这个 Promise 通过 await 运算符传递给 result 变量，然后将 result 输出到控制台。
在函数运行过程中，当遇到 await 运算符时，它会等待上面的 Promise 执行完成并返回结果，这里是字符串 'done!'。接着，result 变量会被赋值为 'done!'，再输出到控制台中。
await 的错误处理
await 运算符也可以通过 try...catch 代码块来处理 Promise 异常。如果被 await 的 Promise 变成了拒绝状态，则会抛出一个异常，我们可以通过 try...catch 代码块来捕获这个异常并进行处理。
下面是一个示例：
-- -------------------- ---- ------- ----- -------- ----------- - --- - ----- ------ - ----- ------------------ ----------------- -------------------- - ----- ------- - --------------------------- - - ------------展开代码
在上面的示例中，我们将 Promise 的状态设置为拒绝，并将一个 Error 对象作为拒绝原因。通过 await 运算符等待这个 Promise 的执行结果时，它会抛出一个异常。我们可以在异步函数中使用 try...catch 代码块捕获这个异常，并输出错误信息。
await 内部执行顺序
当使用 await 运算符时，JavaScript 引擎可以继续执行异步函数中的其他代码。但是，如果使用了多个 await 运算符，它们的执行顺序将是线性的，即按照出现的顺序依次执行。在其中一个 await 运算符等待的 Promise 没有执行完成之前，下一个 await 运算符不会被执行。
下面是一个示例：
-- -------------------- ---- ------- ----- -------- ----------- - --------------------- ----- ------- - ----- --- ----------------- ------- -- - ------------- -- - ----------------- -- ----- --- --------------------- ----- ------- - ----- --- ----------------- ------- -- - ------------- -- - ----------------- -- ----- --- --------------------- ------------------- - ------------展开代码
在这个示例中，我们定义了一个异步函数 asyncFunc，其中有两个 Promise，它们分别在 0.5 秒后将其状态设置为已解决，并分别返回 'done1' 和 'done2'。在异步函数中，我们先输出 start，然后使用 await 运算符等待第一个 Promise 执行完成，再输出其返回值 result1，接着等待第二个 Promise 执行完成，输出其返回值 result2，最后输出 end。
在这个过程中，遇到第一个 await 运算符时，控制权被转移到了异步函数之外，其他代码得以继续执行。但是，当第一个 Promise 执行完成并返回 'done1' 后，await 操作符才会等待第二个 Promise 的执行结果，然后继续执行异步函数内的其他代码。
await 的返回类型
await 运算符会等待 Promise 执行完成后返回其结果，而不是 Promise 本身。因此，使用 await 运算符时，将得到 Promise 的执行结果，而不是 Promise 对象本身。如果 Promise 没有返回任何值，则返回 undefined。
下面是一个示例：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ------- - ----- --- ----------------- ------- -- - ------------- -- - ---------------- -- ------ --- ----- ------- - ----- ------------------ ----- ------- - ----- ------------------ ----------------- -------------------- -------- --------- - ------------展开代码
在这个示例中，我们定义了一个异步函数 asyncFunc，其中包含三个 Promise，并通过 await 运算符等待它们的执行结果。在控制台输出前三个变量，我们可以看到 result1 输出 'done'，result2 输出 undefined，result3 将抛出一个异常。
总结
ES10 中新增的 await 运算符给我们提供了一种方便的方式来处理 Promise 的异步编程。它可以帮助我们等待 Promise 执行完成后再执行后续的操作，并提供了良好的错误处理机制。同时，在多个 await 运算符中使用时，它们的执行顺序是线性的。熟练掌握 await 的用法和特性，可以帮助我们更加高效和优雅地编写异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491474248841e9894f46d9c
