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().then(res => {
console.log('成功', res) // ['1', '3']
}).catch(err => {
console.error('失败', err)
})
Promise.all().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().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().then(res => console.log('成功:', res)); // 成功: 第二个成功
Promise.any().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()
.then(res => console.log('成功:', res))
.catch(error => console.error('失败:', error)); // 失败: 第一个失败
// p2 p1 交换位置，就会获得成功的结果
Promise.race()
.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 的使用，有利于编写出易于维护的项目代码。
来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除
页:
[1]