【学习记录】js的promise

promise详解

Promise 是 JavaScript 中用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。Promise 是 ES6（ECMAScript 2015） 引入的特性，旨在解决传统的回调地狱（Callback Hell）问题，使异步代码更易读、更易维护。

1. Promise 的基本概念

• Promise 是一个对象，表示一个异步操作的最终状态（成功或失败）。
• 它有三种状态：
  1. Pending（进行中）：初始状态，既不是成功也不是失败。
  2. Fulfilled（已成功）：操作成功完成。
  3. Rejected（已失败）：操作失败。
• 一旦状态从 Pending 变为 Fulfilled 或 Rejected，状态就不会再改变。

2. 创建 Promise

Promise 的构造函数接收一个函数（通常称为执行器函数），该函数有两个参数：

• resolve：将 Promise 的状态从 Pending 变为 Fulfilled，并传递结果值。
• reject：将 Promise 的状态从 Pending 变为 Rejected，并传递错误信息。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("Operation succeeded!");
    } else {
      reject("Operation failed!");
    }
  }, 1000);
});

3. 使用 Promise

3.1 then()

• then() 用于处理 Promise 的成功状态（Fulfilled）。
• 它接收两个回调函数：
  • 第一个回调函数：处理成功的结果。
  • 第二个回调函数（可选）：处理失败的结果。

promise.then(
  (result) => console.log(result), // 'Operation succeeded!'
  (error) => console.error(error) // 不会执行
);

3.2 catch()

• catch() 用于处理 Promise 的失败状态（Rejected）。
• 它是 then(null, errorHandler) 的语法糖。

promise
  .then((result) => console.log(result)) // 'Operation succeeded!'
  .catch((error) => console.error(error)); // 不会执行

3.3 finally()

• finally() 用于在 Promise 完成（无论成功或失败）后执行某些操作。
• 它不接收任何参数。

promise
  .then((result) => console.log(result))
  .catch((error) => console.error(error))
  .finally(() => console.log("Operation completed."));

4. Promise 的链式调用

Promise 支持链式调用，每个 then() 或 catch() 都会返回一个新的 Promise，可以继续调用。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve(10), 1000);
});

promise
  .then((result) => result * 2) // 10 * 2 = 20
  .then((result) => result + 5) // 20 + 5 = 25
  .then((result) => console.log(result)) // 25
  .catch((error) => console.error(error));

5. Promise 的静态方法

5.1 Promise.resolve()

• 返回一个已成功的 Promise。

const resolvedPromise = Promise.resolve("Success!");
resolvedPromise.then((result) => console.log(result)); // 'Success!'

5.2 Promise.reject()

• 返回一个已失败的 Promise。

const rejectedPromise = Promise.reject("Error!");
rejectedPromise.catch((error) => console.error(error)); // 'Error!'

5.3 Promise.all()

• 接收一个 Promise 数组，当所有 Promise 都成功时返回结果数组；如果有一个失败，则立即返回失败。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((results) => console.log(results)) // [1, 2, 3]
  .catch((error) => console.error(error));

5.4 Promise.race()

• 接收一个 Promise 数组，返回第一个完成（无论成功或失败）的 Promise 的结果。

const promise1 = new Promise((resolve) => setTimeout(() => resolve(1), 500));
const promise2 = new Promise((resolve) => setTimeout(() => resolve(2), 100));

Promise.race([promise1, promise2])
  .then((result) => console.log(result)) // 2
  .catch((error) => console.error(error));

5.5 Promise.allSettled()

• 接收一个 Promise 数组，等待所有 Promise 完成（无论成功或失败），并返回结果数组。

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject("Error!");

Promise.allSettled([promise1, promise2]).then((results) =>
  console.log(results)
);
// [
//   { status: 'fulfilled', value: 1 },
//   { status: 'rejected', reason: 'Error!' }
// ]

5.6 Promise.any()

• 接收一个 Promise 数组，返回第一个成功的 Promise 的结果；如果所有 Promise 都失败，则返回一个 AggregateError。

const promise1 = Promise.reject("Error 1");
const promise2 = Promise.resolve("Success!");

Promise.any([promise1, promise2])
  .then((result) => console.log(result)) // 'Success!'
  .catch((error) => console.error(error));

6. Promise 的常见使用场景

• 处理 AJAX 请求。
• 处理文件读取、数据库操作等异步任务。
• 解决回调地狱问题。

7. 示例代码

// 模拟异步操作
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve("Data fetched successfully!");
      } else {
        reject("Failed to fetch data!");
      }
    }, 1000);
  });
}

// 使用 Promise
fetchData()
  .then((result) => console.log(result))
  .catch((error) => console.error(error))
  .finally(() => console.log("Fetch operation completed."));

总结

• Promise 是 ES6 引入的异步编程解决方案。
• 它有三种状态：Pending、Fulfilled、Rejected。
• 通过 then()、catch() 和 finally() 处理异步操作的结果。
• 支持链式调用和多种静态方法（如 Promise.all()、Promise.race() 等）。
• 适用于处理复杂的异步任务，避免回调地狱。