如何使用 async/await 处理异步操作？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

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

// www.javascriptcn.com code example
async function fetchData() {
  try {
    console.log("开始获取数据");
    const response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log("数据获取成功:", data);
    return data;
  } catch (error) {
    console.error("获取数据失败:", error);
    throw error; // 重新抛出错误，以便调用者处理
  }
}

fetchData()
  .then(data => {
    console.log("最终获取到的数据:", data);
  })
  .catch(error => {
    console.error("最终捕获到的错误:", error)
  });

本题详细解读

`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 来捕获。

// www.javascriptcn.com code example
async function awaitExample() {
  console.log("await function start");
  const promise = new Promise(resolve => {
      setTimeout(()=>{
          console.log("Promise resolved")
          resolve(20)
      }, 1000)
  });
  const result = await promise;  // 暂停执行，等待 promise resolve
  console.log("await function return:", result); // 输出：await function return: 20
}

awaitExample()
console.log("function call end"); // 输出 await function start function call end Promise resolved await function return: 20

错误处理

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

// www.javascriptcn.com code example
async function awaitError() {
  try {
    const promise = Promise.reject("Something went wrong");
    const result = await promise; // 这里的 await 会抛出异常，跳到 catch
    console.log("这个不会被执行");
  } catch (error) {
    console.log("捕获到异常:", error); // 输出：捕获到异常: Something went wrong
  }
}
awaitError();

`async/await` 的优势

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

注意事项

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

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

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