请解释 async/await 的概念和作用。它与 Promise 的关系是什么？

推荐答案

async/await 是 JavaScript 中用于处理异步操作的语法糖，建立在 Promise 之上。

• async 函数:

  • 使用 async 关键字声明的函数会隐式地返回一个 Promise。
  • 如果函数体返回一个值（非 Promise），该值会被 Promise.resolve() 包裹成一个 resolved 状态的 Promise。
  • 如果函数体抛出一个错误，该错误会被 Promise.reject() 包裹成一个 rejected 状态的 Promise。

• await 表达式:

  • await 关键字只能在 async 函数内部使用。
  • 它会暂停 async 函数的执行，直到 await 后面的 Promise 对象变为 resolved 或 rejected 状态。
  • 如果 Promise resolved，await 表达式会返回 Promise 的 resolve 值。
  • 如果 Promise rejected，await 表达式会抛出一个异常，需要使用 try...catch 来捕获。

与 Promise 的关系:

async/await 并非替代 Promise，而是建立在 Promise 之上的更简洁的异步编程解决方案。

• 它提供了更易读、更像同步代码的异步代码编写方式。
• async 函数返回 Promise，await 表达式等待 Promise，本质上仍然是在处理 Promise 的 resolved 和 rejected 状态。
• async/await 使得异步错误处理更加清晰，可以使用传统的 try...catch 语句来捕获 Promise 的 reject 状态。
• 相较于 .then().catch() 链式调用，async/await 可以减少代码嵌套，提高代码可读性，降低维护成本。

本题详细解读

异步编程的演变

在 async/await 出现之前，JavaScript 中处理异步操作主要依赖回调函数。回调函数容易导致“回调地狱”，代码嵌套层级过深，难以维护。为了解决这个问题，Promise 诞生了，它通过链式调用的方式来处理异步操作，改善了代码结构。但是，Promise 的 .then().catch() 链式调用在复杂的异步逻辑中依然不够直观。async/await 的出现就是为了进一步简化异步编程，提高代码的可读性和可维护性。

async 函数的特性

• 隐式返回 Promise： 任何使用 async 声明的函数，无论函数体内部返回什么，都会被包装成一个 Promise。即使函数返回的是一个普通的值，也会被包装成一个 resolve 状态的 Promise。这意味着我们可以像处理 Promise 一样使用 async 函数的返回值。

  async function myAsyncFunc() {
    return 10;
  }
  
  myAsyncFunc().then(value => {
    console.log(value); // 输出 10
  });

• Promise 的 resolve 和 reject： async 函数内部如果没有抛出异常，则返回的 Promise 状态为 resolved，返回值为函数体的返回值；如果函数内部抛出了异常，则返回的 Promise 状态为 rejected，异常信息被作为 rejected 的原因。

  -- -------------------- ---- -------
  ----- -------- -------------- -
      ------ ----------
  -
  
  ----- -------- ----------- -
      ----- --- --------------
  -
  
  ------------------------- -- -------------------- -- -- ---------
  ----------------------- -- ---------------------- -- -- ------ ----

await 表达式的作用

• 暂停执行: await 表达式会暂停 async 函数的执行，直到它后面跟随的 Promise 对象的状态变为 resolved 或 rejected。 这使得异步代码看起来像是同步代码一样执行，避免了复杂的链式调用。

• 返回 Promise 的值: 当 Promise 状态变为 resolved 时，await 表达式会返回 Promise 的 resolve 值。这样，就可以直接使用这个值，而无需通过 .then() 来获取。

• 捕获 Promise 的异常: 如果 Promise 状态变为 rejected， await 表达式会抛出一个异常，可以使用 try...catch 来捕获这个异常。

  -- -------------------- ---- -------
  ----- -------- ----------- -
    --- -
      ----- -------- - ----- --------------------------------------
      ----- ---- - ----- ----------------
      ------------------
    - ----- ------- -
        ---------------------- -------
    -
  -
  
  ------------

async/await 与 Promise 的关系总结

• async/await 是基于 Promise 的，它本质上是对 Promise 的语法糖。
• async 函数始终返回 Promise。
• await 表达式用于等待 Promise 的状态变化。
• async/await 使得异步代码更加易读易维护，减少了 .then().catch() 的链式调用。
• async/await 并不是取代 Promise，而是对 Promise 的一种优化。

总的来说，理解 Promise 是理解 async/await 的前提，async/await 是 Promise 的一种高级应用方式，两者相辅相成，共同构建 JavaScript 中的异步编程模式。