JavaScript Promise 的常用API

1. 静态方法
Promise.resolve(value)

创建一个已解决的Promise,返回的Promise状态为fulfilled,并带有给定的值。(创建一个已解决的 Promise)

javascript 复制代码
Promise.resolve(1).then(console.log); // 1

Promise.reject(reason)

创建一个已拒绝的Promise,返回的Promise状态为rejected,并带有给定的拒绝原因。(创建一个已拒绝的 Promise)

javascript 复制代码
Promise.reject(new Error('error')).catch(e => console.log(e.message)); // error

Promise.all(iterable)

接受一个可迭代对象(如数组),并返回一个新的Promise。当所有Promise都成功时,返回的Promise才成功,成功值是所有Promise成功值的数组;如果有一个失败,则返回的Promise立即失败,失败原因是第一个失败的Promise的原因。(等待所有 Promise 完成<所有成功或一个失败>)

适用场景:当需要并行执行多个异步任务,并在所有任务都完成时执行某个操作。

javascript 复制代码
Promise.all([
  Promise.resolve(1),
  Promise.resolve(2)
]).then(console.log); // [1, 2]

Promise.allSettled(iterable)

接受一个可迭代对象,并返回一个新的Promise。当所有Promise都已解决(无论是成功还是失败)时,返回的Promise成功,成功值是一个对象数组,每个对象表示对应Promise的结果。每个对象都有status属性,值为'fulfilled'或'rejected',如果为'fulfilled',则还有value属性;如果为'rejected',则还有reason属性。(等待所有 Promise 完成<无论成功或失败>)

适用场景:当你想获取所有 Promise 的结果,无论它们是否成功,都适合使用。它将返回每个 Promise 的状态和结果或失败原因。

javascript 复制代码
Promise.allSettled([
  Promise.resolve(1),
  Promise.reject(new Error('error'))
]).then(console.log);
// 输出: [
//   { status: 'fulfilled', value: 1 },
//   { status: 'rejected', reason: Error: error }
// ]

Promise.any(iterable)

接受一个可迭代对象,并返回一个新的Promise。当其中任何一个Promise成功时,返回的Promise就成功,成功值是第一个成功的Promise的成功值;如果所有Promise都失败,则返回的Promise失败,失败原因是一个AggregateError,包含所有失败原因。(等待第一个成功的 Promise)

适用场景:适用于希望在多个异步操作中找到第一个成功的结果的场景。

javascript 复制代码
Promise.any([
  Promise.reject(new Error('error1')),
  Promise.resolve(2)
]).then(console.log); // 2

Promise.race(iterable)

接受一个可迭代对象,并返回一个新的Promise。返回的Promise的状态和值与可迭代对象中第一个改变状态的Promise相同。(等待第一个完成的 Promise<无论成功或失败>)

适用场景:返回第一个完成的 Promise(无论是成功还是失败)。

javascript 复制代码
Promise.race([
  new Promise(resolve => setTimeout(() => resolve(1), 100)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), 50))
]).catch(e => console.log(e.message)); // timeout

2. 实例方法
Promise.prototype.then(onFulfilled, onRejected)

为Promise添加成功和失败的回调函数,返回一个新的Promise。onFulfilled在Promise成功时被调用,接收成功值;onRejected在Promise失败时被调用,接收失败原因。如果传入的回调函数返回一个值,则返回的Promise以该值解决;如果抛出错误,则返回的Promise以该错误拒绝。(添加解决和拒绝回调)

Promise.prototype.catch(onRejected)

为Promise添加失败的回调函数,返回一个新的Promise。相当于.then(null, onRejected)。(添加拒绝回调)

Promise.prototype.finally(onFinally)

为Promise添加一个回调函数,无论Promise成功还是失败,该回调函数都会在Promise解决后被调用。返回一个新的Promise,其状态和值与原始Promise相同。(添加最终回调)

javascript 复制代码
// 实例方法示例
const p = new Promise((resolve, reject) => {
  resolve(1);
});

p.then(value => {
  console.log(value); // 1
  return value + 1;
}).then(value => {
  console.log(value); // 2
});

p.catch(error => {
  console.log(error);
});

p.finally(() => {
  console.log('finally');
});
相关推荐
兆子龙20 分钟前
当「多应用共享组件」成了刚需:我们从需求到模块联邦的落地小史
前端·架构
Qinana22 分钟前
从代码到智能体:MCP 协议如何重塑 AI Agent 的边界
前端·javascript·mcp
Wect31 分钟前
LeetCode 130. 被围绕的区域:两种解法详解(BFS/DFS)
前端·算法·typescript
不会敲代码134 分钟前
从入门到进阶:手写React自定义Hooks,让你的组件更简洁
前端·react.js
用户54330814419436 分钟前
拆完 Upwork 前端我沉默了:你天天卷的那些技术,人家根本没用
前端
洋洋技术笔记37 分钟前
Vue实例与数据绑定
前端·vue.js
Marshall15137 分钟前
zzy-scroll-timer:一个跨框架的滚动定时器插件
前端·javascript
明月_清风2 小时前
打字机效果优化:用 requestAnimationFrame 缓冲高频文字更新
前端·javascript
明月_清风2 小时前
Markdown 预解析:别等全文完了再渲染,如何流式增量渲染代码块和公式?
前端·javascript
掘金安东尼3 小时前
用 CSS 打造完美的饼图
前端·css