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 的使用，有利于编写出易于维护的项目代码。