JavaScript 中 Promise 和 async/await 的用法？

推荐答案

// www.javascriptcn.com code example
// 使用 Promise
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { message: "Data fetched successfully" };
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data.message);
  })
  .catch((error) => {
    console.error(error);
  });

// 使用 async/await
async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data.message);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync();

本题详细解读

Promise 的用法

Promise 是 JavaScript 中用于处理异步操作的对象。它有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。通过 then 和 catch 方法可以分别处理成功和失败的情况。

• new Promise(executor): 创建一个新的 Promise 对象。executor 是一个函数，它接受两个参数：resolve 和 reject。resolve 用于将 Promise 状态从 pending 变为 fulfilled，而 reject 用于将状态从 pending 变为 rejected。

• then(onFulfilled, onRejected): 用于指定当 Promise 状态变为 fulfilled 或 rejected 时的回调函数。onFulfilled 是成功时的回调，onRejected 是失败时的回调。

• catch(onRejected): 用于指定当 Promise 状态变为 rejected 时的回调函数。它是 then(null, onRejected) 的简写形式。

async/await 的用法

async/await 是 ES2017 引入的语法糖，用于简化 Promise 的使用。async 关键字用于声明一个异步函数，而 await 关键字用于等待一个 Promise 的解决。

• async function: 声明一个异步函数。异步函数会自动返回一个 Promise 对象。如果函数内部返回一个值，Promise 将会以该值 resolve；如果函数内部抛出异常，Promise 将会以该异常 reject。

• await: 用于等待一个 Promise 的解决。await 只能在 async 函数内部使用。它会暂停 async 函数的执行，直到 Promise 状态变为 fulfilled 或 rejected。如果 Promise 成功解决，await 表达式会返回解决的值；如果 Promise 被拒绝，await 会抛出异常。

示例解析

• Promise 示例:

  • fetchData 函数返回一个 Promise，模拟异步操作（如网络请求）。
  • 使用 then 方法处理成功的情况，catch 方法处理失败的情况。

• async/await 示例:

  • fetchDataAsync 是一个异步函数，使用 await 等待 fetchData 的解决。
  • 使用 try/catch 结构来处理成功和失败的情况。

通过 async/await，代码看起来更像同步代码，更易于理解和维护。