如何使用 async/await 处理异步操作？

推荐答案

使用 async/await 可以更简洁、更同步地处理 JavaScript 中的异步操作，它建立在 Promise 的基础上。async 关键字用于声明一个异步函数，该函数始终返回一个 Promise。await 关键字只能在 async 函数内部使用，它会暂停函数的执行，等待 Promise resolve 或 reject，并返回 Promise resolve 的值。如果 Promise reject，则会抛出一个错误，可以被 try...catch 捕获。

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

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

本题详细解读

async 函数

• async 关键字用于定义一个异步函数。
• 异步函数会隐式返回一个 Promise。
• 如果异步函数返回值不是一个 Promise，它会被包装成一个 resolve 的 Promise。
• 可以在异步函数中使用 await 关键字。

async function asyncExample() {
  console.log("async function start");
  return 10; // 返回值不是 Promise，会被包装为 Promise.resolve(10)
}

asyncExample().then(value => console.log("async function return:",value))  // 输出：async function start   async function return: 10

await 关键字

• await 关键字只能在 async 函数内部使用。
• await 用于暂停异步函数的执行，等待 Promise resolve 或者 reject。
• 如果 Promise resolve，await 会返回 Promise 的 resolve 值。
• 如果 Promise reject，await 会抛出 reject 的值，通常需要 try...catch 来捕获。

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

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

错误处理

• async/await 结合 try...catch 可以优雅地处理异步操作中的错误。
• 当 await 的 Promise reject 时，会抛出一个错误，这个错误可以在 try...catch 块中被捕获。
• 可以在 catch 块中处理错误，或者重新抛出错误，以便调用者进行处理。

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

async/await 的优势

• 使异步代码看起来更像同步代码，代码更易读和维护。
• 减少了 Promise 的 then 和 catch 链式调用，避免了回调地狱。
• 提高代码的结构性和可读性。
• 方便使用 try...catch 来处理错误。

注意事项

• async 函数必须返回 Promise，如果返回非 Promise，会被包装成 Promise。
• await 只能在 async 函数中使用。
• 使用 try...catch 来处理异步函数中的错误。
• async/await 实际上是基于 Promise 的语法糖，底层仍然使用 Promise 实现。

总而言之，async/await 是一种更现代、更优雅的方式来处理 JavaScript 中的异步操作，它能有效提高代码的可读性和可维护性。