Promise 构造函数静态方法详解

5 阅读3分钟

一、Promise.resolve()

功能:返回一个已完成(Fulfilled)的 Promise 实例,值为传入的参数。

示例代码

const promise = Promise.resolve(123);
promise.then(val => {
  console.log('已完成', val); // 输出: 已完成 123
});

参数处理规则

  • 若参数为普通值(如数字、字符串):直接包装为已完成的 Promise。
  • 若参数为 Promise 或 Thenable:遵循 Promise 解决过程(见前文规范)。

应用场景

  • 将同步值转换为异步 Promise 以便统一处理。
  • 在链式调用中快速返回结果:return Promise.resolve(data)

二、Promise.reject()

功能:返回一个已拒绝(Rejected)的 Promise 实例,拒绝原因是传入的参数。

示例代码

const promise = Promise.reject(new Error('失败原因'));
promise.catch(err => {
  console.log('已拒绝', err.message); // 输出: 已拒绝 失败原因
});

注意事项

  • 拒绝原因通常为 Error 对象,便于错误追踪。
  • 参数不会被解析,即使传入 Promise 或 Thenable 也直接作为原因传递。

三、Promise.all()

功能:并行处理多个 Promise,返回一个新 Promise:

  • 所有 Promise 成功时,结果为包含所有值的数组。
  • 任一 Promise 失败时,立即以该失败原因拒绝。

示例代码

function promise1() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(1);
      resolve(1);
    }, 1000);
  });
}

function promise2() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(2);
      resolve(2);
    }, 2000);
  });
}

Promise.all([promise1(), promise2()])
  .then(values => {
    console.log('全部完成', values); // 输出: 全部完成 [1, 2]
  })
  .catch(err => {
    console.log('有一个失败', err);
  });

执行流程

  1. 同时启动 promise1promise2
  2. 1 秒后 promise1 完成,输出 1
  3. 再过 1 秒 promise2 完成,输出 2全部完成 [1, 2]

应用场景

  • 批量请求数据(如同时获取用户信息、订单列表)。
  • 资源预加载(如同时加载多个图片)。

四、Promise.race()

功能:多个 Promise 竞争,返回第一个改变状态的 Promise 的结果。

示例代码

function promise1() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(1);
      resolve(1);
    }, 1000);
  });
}

function promise2() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(2);
      resolve(2);
    }, 2000);
  });
}

Promise.race([promise1(), promise2()])
  .then(value => {
    console.log('首个完成', value); // 输出: 首个完成 1
  })
  .catch(err => {
    console.log('首个失败', err);
  });

执行流程

  1. 同时启动 promise1promise2
  2. 1 秒后 promise1 完成,输出 1首个完成 1
  3. promise2 继续执行,但结果被忽略。

应用场景

  • 实现请求超时控制:
    Promise.race([
      fetchData(), // API 请求
      new Promise((_, reject) => setTimeout(() => reject(new Error('请求超时')), 5000))
    ]);
    
  • 多个数据源竞争(如同时从缓存和网络获取数据)。

五、方法对比表

方法参数返回状态结果特点
resolve单个值已完成(Fulfilled)直接包装传入值
reject单个值(通常为 Error)已拒绝(Rejected)直接包装拒绝原因
all可迭代对象(如数组)全部成功则 Fulfilled
任一失败则 Rejected
结果为有序数组,与传入顺序一致
race可迭代对象(如数组)首个状态变更决定结果为首个完成或拒绝的值

六、注意事项

  1. Promise.all 的失败处理

    // 若其中一个 Promise 失败,其他仍会继续执行(只是结果被忽略)
    Promise.all([
      fetch('api/user'),
      fetch('api/orders'), // 假设这个请求失败
      fetch('api/products')
    ]).catch(err => {
      console.log('有一个请求失败', err); // 仅捕获首个失败
    });
    
  2. 空数组参数行为

    • Promise.all([]) 立即完成,结果为 []
    • Promise.race([]) 永远保持 pending(需避免)。
  3. 非 Promise 参数处理

    • Promise.allPromise.race 会先将参数转换为 Promise(通过 Promise.resolve)。
    • 示例:Promise.all([1, 2, 3]) 等价于 Promise.all([Promise.resolve(1), ...])

掌握这些静态方法,能更高效地处理复杂异步流程,避免回调地狱。