摘要:Promise 是 JavaScript 中处理异步操作的核心对象,它提供了一种更优雅的方式来管理异步代码,避免了传统的“回调地狱”。以下是关于 Promise 的详细说明:
Promise 是 JavaScript 中处理异步操作的核心对象,它提供了一种更优雅的方式来管理异步代码,避免了传统的“回调地狱”。以下是关于 Promise 的详细说明:
1. 核心概念
状态:Promise 有三种不可逆的状态Ø pending(进行中)
Ø fulfilled(已成功)
Ø rejected(已失败)
结果:状态改变后会被凝固,称为 settled2. 基本用法
创建 Promise
javascript
const promise = new Promise((resolve, reject) => {
// 异步操作(如 API 请求、定时器等)
if (/* 成功条件 */) {
resolve(value); // 状态变为 fulfilled
} else {
reject(error); // 状态变为 rejected
}
});
使用 Promise
javascript
promise
.then(value => { /* 处理成功结果 */ })
.catch(error => { /* 处理错误 */ })
.finally( => { /* 无论成败都会执行 */ });
3. 核心特性
链式调用:.then 返回新 Promise,可连续调用javascript
fetchData
.then(processData)
.then(saveData)
.catch(handleError);
错误冒泡:链式中的错误会被最近的 .catch 捕获微任务队列:Promise 回调属于微任务,优先于宏任务(如 setTimeout)执行4. 静态方法
方法用途Promise.all(iterable)所有 Promise 成功时返回结果数组,任一失败立即拒绝Promise.any(iterable)任一 Promise 成功即返回其结果(ES2021)Promise.race(iterable)采用最先 settled 的 Promise 的结果Promise.allSettled(iterable)等待所有 Promise settled,返回状态描述数组(ES2020)Promise.resolve(value)返回一个已 resolve 的 PromisePromise.reject(reason)返回一个已 reject 的 Promise5. 常见使用场景
API 请求封装javascript
function fetchUser(id) {
return new Promise((resolve, reject) => {
axios.get(`/users/${id}`)
.then(response => resolve(response.data))
.catch(reject);
});
}
顺序异步操作javascript
login
.then(getUserProfile)
.then(loadUserPosts)
并行处理javascript
Promise.all([fetchUsers, fetchProducts])
.then(([users, products]) => { ... });
6. 最佳实践
始终返回 Promise:在 .then 中返回新值或 Promise 以保持链式错误处理:至少有一个 .catch 或使用 try/catch 配合 async/await避免嵌套:通过链式调用代替嵌套的 .then状态不可逆:一个 Promise 只能 settle 一次7. 与 async/await 的关系
async/await 是 Promise 的语法糖:
javascript
async function example {
try {
const data = await fetchData;
const processed = await processData(data);
return processed;
} catch (error) {
handleError(error);
}
}
8. 浏览器兼容性
现代浏览器和 Node.js 7.6+ 原生支持旧环境可通过 polyfill(如 es6-promise)实现通过 Promise,开发者可以更清晰地表达异步逻辑,配合现代语法(如解构、箭头函数)能显著提升代码可维护性。
来源:老客数据一点号