Web前端入门第 69 问：JavaScript Promise 提供的方法都使用过吗？

Promise 这个 API 曾在 JS 领域掀起过血雨腥风，以前的大佬们都喜欢手搓一个自己的 Promise 用以理解 Promise 的原理。

Promise 的诞生，应该多少都有受到 jQuery 的异步方法 $.Deferred() 影响。

应用场景

Promise 唯一作用就是在处理异步耗时任务的时候，不要出现回调地狱。在没有 Promise 之前，一般使用 callback 来解决异步问题，一般代码都是这样：

a(() => {   b(()  => {     c(() => {       d(() => {})     })   }) }) 

就这样一层一层套进去，像套娃一样的回调方法，这就是所谓的 回调地狱。

使用 Promise 之后，代码就可以改成链式调用，避免了回调地狱：

a() .then(() => {   return b() }).then(() => {   return c() }).then(() => {   return d() }) 

常见用法

在代码中经常会看到这样使用 Promise：

function task() {   return new Promise((resolve, reject) => {     setTimeout(() => {       resolve('耗时任务执行成功')     }, 1000)   }) } // 开始执行耗时任务 task().then(res => {   console.log('任务执行成功') }).catch(err => {   console.log('任务执行失败') }).finally(() => {   console.log('任务执行完成') })  // 或者是这样 task().then(res => {   console.log('任务执行成功') }, err => {   console.log('任务执行失败') }).finally(() => {   console.log('任务执行完成') }) 

.then 方法接收两个参数，第一个参数是执行成功（fulfilled）的回调方法，第二个参数是执行失败（rejected）的回调方法。

.catch 方法用于捕获 Promise 中的错误，如果 Promise 执行失败，就会执行 .catch 方法，比如：

function task() {   return new Promise((resolve, reject) => {     setTimeout(() => {       reject(new Error('任务执行失败'))     }, 1000)   }) } task().catch(err => {   console.log(err.message) }) 

.finally 方法无论 Promise 执行成功与否，都会执行的方法，一般多用于关闭 loading 这种效果，也可以用于清理资源。

Promise 的静态方法

以上三个方法都是 Promise 的实例方法，除了常用的实例方法外，Promise 还提供了一些静态方法，这些静态方法不是很常用（也可能是咱的段位太低），但在某些特定的需求场景中也是很有用的利器。

Promise.reject() 与 Promise.resolve()

这一对静态方法一般多用于将同步方法改成 Promise，比如：

function task() {   if (Math.random() > 0.5) {     return Promise.reject(new Error('任务执行失败'))   }   return Promise.resolve('任务执行成功') } task().then((res) => console.log(res), err => console.error(err.message)) 

其参数还支持返回一个 Promise 对象或者一个 thenable 对象。比如这样：

function task1() {   return new Promise((resolve, reject) => {     if (Math.random() > 0.5) {       return resolve('耗时任务执行成功')     }     return reject(new Error('任务执行失败'))   }) } function task2() {   // Promise 对象   return Promise.resolve(task1()) } task2().then((res) => console.log(res), err => console.error(err.message))  // ----------------------  function task3() {   // thenable 对象   const thenable = {     then(onFulfill, onReject) {       if (Math.random() > 0.5) {         return onReject(new Error('任务执行失败'))       }       return onFulfill('任务执行成功')     },   }   return Promise.resolve(thenable) } task3().then((res) => console.log(res), err => console.error(err.message)) 

Promise.all()

用于同时处理多个 Promise，如果全部都成功解决时，返回的 Promise 才会解决，但凡有一个被拒绝，则返回的 Promise 失败。

const p1 = Promise.resolve('1') const p2 = Promise.reject('2') const p3 = Promise.resolve('3') Promise.all([p1, p3]).then(res => {   console.log('成功', res) // ['1', '3'] }).catch(err => {   console.error('失败', err) }) Promise.all([p2, p3]).then(res => {   console.log('成功', res) }).catch(err => {   console.error('失败', err) // 获得失败的返回值 2 }) 

Promise.allSettled()

与 Promise.all 有点不同，这个静态方法会等到所有的 Promise 都解决或者失败，然后返回一个 Promise，这个 Promise 的结果是一个数组，数组的元素是所有 Promise 的状态及响应结果。一般多用于多个接口同时请求场景，可以容忍部分接口异常的情况。

const p1 = Promise.resolve('1') const p2 = Promise.reject('用于测试失败') const p3 = Promise.resolve('3') Promise.allSettled([p1, p2, p3]).then(res => {   res.forEach(result => {     if (result.status === 'fulfilled') {       console.log('成功:', result.value);     } else {       console.error('失败:', result.reason);     }   }); }) 

Promise.any()

也是用于处理多个 Promise，此方法的逻辑是：只获取第一个成功的 Promise 返回结果，如果全部失败，则返回一个失败的 Promise。

const p1 = new Promise((resolve, reject) => setTimeout(reject, 100, '第一个失败')); const p2 = new Promise((resolve) => setTimeout(resolve, 200, '第二个成功')); const p3 = new Promise((resolve, reject) => setTimeout(reject, 300, '第三个失败')); const p4 = new Promise((resolve) => setTimeout(resolve, 200, '第四个成功'));  Promise.any([p1, p2, p3, p4]).then(res => console.log('成功:', res)); // 成功: 第二个成功  Promise.any([p1, p3]).catch(error => {   console.error('所有 Promise 失败:', error) // AggregateError: All promises were rejected   console.error('失败原因:', error.errors) // ['第一个失败', '第三个失败'] }); 

Promise.race()

此方法存在竞速的逻辑，谁最快返回就获得谁的结果，不论此结果是成功还是失败。

const p1 = new Promise((resolve, reject) => setTimeout(reject, 100, '第一个失败')); const p2 = new Promise((resolve) => setTimeout(resolve, 100, '第二个成功'));  Promise.race([p1, p2])   .then(res => console.log('成功:', res))   .catch(error => console.error('失败:', error)); // 失败: 第一个失败  // p2 p1 交换位置，就会获得成功的结果 Promise.race([p2, p1])   .then(res => console.log('成功:', res)) // 成功: 第二个成功   .catch(error => {     console.error('失败:', error)   }); 

Promise.withResolvers()

2024 年新增的规范，使用时需注意兼容情况。

这方法相当于封装了一个语法糖，想比之前拥有了更简洁的代码逻辑而已，一般多用于跨模块共享 Promise 状态。使用方法：

const { promise, resolve, reject } = Promise.withResolvers();  function task() {   if (Math.random() > 0.5) {     return resolve('任务执行成功')   }   return reject(new Error('任务执行失败')) }  task()  promise.then(res => {   console.log('成功:', res) }).catch(err => {   console.error('失败:', err) }) 

只是需要特别注意，promise 的状态在变为已解决或失败时，promise 的状态就无法再修改了，后面再调用 resolve 或 reject 方法都无任何响应。

这个静态方法可使用原有的方法实现，如下：

function createDeferredPromise() {   let resolve, reject;   const promise = new Promise((res, rej) => {     resolve = res;     reject = rej;   });   return { promise, resolve, reject }; } const { promise, resolve, reject } = createDeferredPromise(); 

想比而言，withResolvers实现的代码更加简洁。

Promise.try()

这方法可时髦了，2025年才新增的规范，使用时需特别小心兼容性。

跟 try catch 相似，都是用于捕获异常，使用方法：

console.log(1) Promise.try(() => {   console.log(3)   throw new Error('前端路引') }).catch(err => console.log('捕获:', err)) console.log(2) 

执行顺序：

1 3 2 捕获: Error: 前端路引 

关于兼容性

由于 Promise 的静态方法都是在不同的 ES 版本迭代时添加进来的规范，所以多多少少都有一些兼容问题，在 Vite 项目中，可以使用以下两个插件来处理兼容问题：

1、@vitejs/plugin-legacy

周下载量在 35万左右
npm 地址：https://www.npmjs.com/package/@vitejs/plugin-legacy

2、vite-plugin-legacy-swc

周下载量再 1万左右
npm 地址：https://www.npmjs.com/package/vite-plugin-legacy-swc

使用方法可以参考 npm 的 Readme 文档。

写在最后

Promise 在处理异步任务时特别常用，还多用于一些耗时太长的任务场景，掌握 Promise 的使用，有利于编写出易于维护的项目代码。