Skip to main content

Promise基础

JavaScript 的 Promise 是一种处理异步操作的机制，能够让代码在处理异步任务时更具可读性和可维护性。Promise 对象代表一个异步操作的最终完成（或失败）及其结果值。以下是对 Promise 的详细解释：

基础概念​

  1. Promise 状态

    • Pending（待定）: 初始状态，既不是成功也不是失败。
    • Fulfilled（已兑现）: 操作成功完成，结果值是 promise 被解决的值。
    • Rejected（已拒绝）: 操作失败，原因是 promise 被拒绝的原因。

  2. Promise 对象的三种状态:

    • 一个 Promise 对象在其生命周期内只能处于上述三种状态中的一种，且状态一旦改变就不可再改变。

创建 Promise​

使用 Promise 构造函数可以创建一个新的 Promise 实例。构造函数接受一个执行函数作为参数，这个执行函数有两个参数：resolve 和 reject。

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  const success = true;
  
  if (success) {
    resolve('操作成功');
  } else {
    reject('操作失败');
  }
});

使用 Promise​

Promise 对象提供了两个主要的方法来处理结果：then 和 catch。

  • then(onFulfilled, onRejected):
    • onFulfilled 是一个函数，它会在 Promise 成功时被调用，并接收 resolve 的值。
    • onRejected 是一个函数，它会在 Promise 失败时被调用，并接收 reject 的值。
myPromise
  .then(result => {
    console.log(result); // 输出: 操作成功
  })
  .catch(error => {
    console.log(error); // 输出: 操作失败
  });
  • catch(onRejected): 处理 Promise 的拒绝状态。它等同于 then(null, onRejected)。
myPromise
  .catch(error => {
    console.log(error); // 输出: 操作失败
  });
  • finally(onFinally): 不管 Promise 是成功还是失败，都会执行 onFinally 回调。常用于清理操作。
myPromise
  .finally(() => {
    console.log('Promise 完成');
  });

链式调用​

Promise 支持链式调用。这意味着你可以在一个 Promise 完成后继续链式调用 then 和 catch。

myPromise
  .then(result => {
    console.log(result); // 操作成功
    return result + ' - 继续处理';
  })
  .then(newResult => {
    console.log(newResult); // 操作成功 - 继续处理
  })
  .catch(error => {
    console.log(error);
  });

处理多个 Promise​

  • Promise.all(iterable): 等待所有 Promise 完成并返回一个新的 Promise，这个 Promise 会在所有输入的 Promise 都成功时成功，并返回所有 Promise 成功结果的数组。如果有任何一个 Promise 失败，则返回的 Promise 也会失败。
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // [3, 42, 'foo']
  });
  • Promise.race(iterable): 返回一个新的 Promise，一旦迭代中的 Promise 有一个成功或失败，它就会返回该 Promise 的结果值。
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'two'));

Promise.race([promise1, promise2])
  .then(value => {
    console.log(value); // 'two'
  });
  • Promise.allSettled(iterable): 等待所有 Promise 都完成，不管是成功还是失败，并返回一个新的 Promise，该 Promise 在所有输入的 Promise 都完成后成功，返回所有输入 Promise 结果的数组，每个结果都是一个对象，包含 status 和 value 或 reason。
const promise1 = Promise.resolve(3);
const promise2 = Promise.reject('error');
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach((result) => {
      if (result.status === 'fulfilled') {
        console.log('成功:', result.value);
      } else {
        console.log('失败:', result.reason);
      }
    });
  });
  • Promise.any(iterable): 返回一个新的 Promise，一旦迭代中的任何一个 Promise 成功，返回的 Promise 就会成功。所有 Promise 都失败时，返回的 Promise 会失败。
const promise1 = Promise.reject('error1');
const promise2 = Promise.reject('error2');
const promise3 = Promise.resolve('success');

Promise.any([promise1, promise2, promise3])
  .then(value => {
    console.log(value); // 'success'
  });

总结​

Promise 是一种强大的工具，能够让你更好地管理异步操作和处理链式调用。它帮助你避免了回调地狱（callback hell），使得异步代码更为简洁和易于理解。