Promise 静态方法:轻松处理多个异步任务

在 JavaScript 中,Promise 是处理异步操作的强大工具。除了基本的 .then().catch() 方法外,Promise 还提供了一系列静态方法,这些方法可以帮助我们更方便地处理多个异步任务。本文将详细介绍这些静态方法,并通过实际案例展示它们的使用场景。

1. Promise.resolve(data)

Promise.resolve(data) 用于将一个值包装成一个状态为 fulfilled 的 Promise 对象。如果传入的值已经是 Promise 对象,则直接返回该 Promise 对象。

javascript 复制代码
const promise = Promise.resolve(42);
promise.then((value) => {
  console.log(value); // 42
});

2. Promise.reject(reason)

Promise.reject(reason) 用于创建一个状态为 rejected 的 Promise 对象。如果传入的值已经是 Promise 对象,则直接返回该 Promise 对象。

javascript 复制代码
const promise = Promise.reject(new Error('出错了'));
promise.catch((error) => {
  console.log(error.message); // "出错了"
});

3. Promise.all(任务数组)

Promise.all(任务数组) 用于处理多个 Promise 对象。它返回一个新的 Promise 对象,该对象在所有输入的 Promise 对象都成功完成时成功,否则失败。

javascript 复制代码
const promises = [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)];
Promise.all(promises).then((results) => {
  console.log(results); // [1, 2, 3]
});

如果任何一个 Promise 失败,Promise.all 会立即失败,并返回失败的原因。

javascript 复制代码
const promises = [Promise.resolve(1), Promise.reject(new Error('出错了')), Promise.resolve(3)];
Promise.all(promises).then((results) => {
  console.log(results); // 不会执行
}).catch((error) => {
  console.log(error.message); // "出错了"
});

4. Promise.any(任务数组)

Promise.any(任务数组) 用于处理多个 Promise 对象。它返回一个新的 Promise 对象,该对象在任何一个输入的 Promise 对象成功完成时成功,否则失败。

javascript 复制代码
const promises = [Promise.reject(new Error('1')), Promise.resolve(2), Promise.reject(new Error('3'))];
Promise.any(promises).then((result) => {
  console.log(result); // 2
}).catch((error) => {
  console.log(error.message); // 不会执行
});

如果所有 Promise 都失败,Promise.any 会失败,并返回一个包含所有失败原因的数组。

javascript 复制代码
const promises = [Promise.reject(new Error('1')), Promise.reject(new Error('2')), Promise.reject(new Error('3'))];
Promise.any(promises).then((result) => {
  console.log(result); // 不会执行
}).catch((errors) => {
  console.log(errors); // [Error: "1", Error: "2", Error: "3"]
});

5. Promise.allSettled(任务数组)

Promise.allSettled(任务数组) 用于处理多个 Promise 对象。它返回一个新的 Promise 对象,该对象在所有输入的 Promise 对象都已成功,不会失败。

javascript 复制代码
const promises = [Promise.resolve(1), Promise.reject(new Error('2')), Promise.resolve(3)];
Promise.allSettled(promises).then((results) => {
  console.log(results);
  // [
  //   { status: 'fulfilled', value: 1 },
  //   { status: 'rejected', reason: Error: "2" },
  //   { status: 'fulfilled', value: 3 }
  // ]
});

6. Promise.race(任务数组)

Promise.race(任务数组) 用于处理多个 Promise 对象。它返回一个新的 Promise 对象,该对象在任何一个输入的 Promise 对象已决时立即已决,状态和值与第一个已决的 Promise 一致。

javascript 复制代码
const promises = [Promise.resolve(1), Promise.reject(new Error('2')), Promise.resolve(3)];
Promise.race(promises).then((result) => {
  console.log(result); // 1
}).catch((error) => {
  console.log(error.message); // 不会执行
});
相关推荐
前端Hardy17 分钟前
前端必看!LocalStorage这么用,再也不踩坑(多框架通用,直接复制)
前端·javascript·面试
前端Hardy18 分钟前
前端必看!前端路由守卫这么写,再也不担心权限混乱(Vue/React通用)
前端·javascript·面试
Lee川39 分钟前
从零构建现代化登录界面:React + Tailwind CSS 前端工程实践
前端·react.js
Awu122739 分钟前
⚡精通 Claude 第 1 课:掌握 Slash Commands
前端·人工智能·ai编程
竹林81840 分钟前
从ethers.js迁移到Viem:我在重构DeFi前端时踩过的那些坑
前端·javascript
码云之上1 小时前
上下文工程实战:解决多轮对话中的"上下文腐烂"问题
前端·node.js·agent
小小弯_Shelby1 小时前
webpack优化:Vue配置compression-webpack-plugin实现gzip压缩
前端·vue.js·webpack
小村儿1 小时前
连载04-CLAUDE.md ---一起吃透 Claude Code,告别 AI coding 迷茫
前端·后端·ai编程
攀登的牵牛花1 小时前
我把 Gemma4:26b 装进 M1 Pro 后,才看清 AI 编程最贵的不是模型费,而是工作流
前端·agent
大漠_w3cpluscom1 小时前
现代 CSS 的新力量
前端