当前位置：首页 > news >正文

JavaScript 中的 Promise 详解

news 2025/11/14 8:48:43

在 JavaScript 中，Promise 是一种用于处理异步操作的对象，它解决了传统回调函数嵌套（“回调地狱”）的问题，提供了更优雅、更可读的异步代码编写方式。

一、Promise 的核心含义

Promise 字面意思是 “承诺”，代表一个尚未完成但最终会完成的异步操作，并关联其结果（成功或失败）。它有三种状态：

pending（等待中）：初始状态，操作未完成。
fulfilled（已成功）：操作完成，返回结果。
rejected（已失败）：操作出错，返回错误信息。

状态一旦从 pending 变为 fulfilled 或 rejected，就不可逆（无法再改变）。

二、Promise 的基本用法

1. 创建 Promise 对象

通过 new Promise() 构造函数创建，接收一个执行器函数（executor）作为参数，该函数有两个回调参数：resolve（成功时调用）和 reject（失败时调用）。

const promise = new Promise((resolve, reject) => {// 异步操作（如定时器、接口请求等）setTimeout(() => {const success = true;if (success) {resolve("操作成功的结果"); // 状态变为 fulfilled，传递成功结果} else {reject("操作失败的原因"); // 状态变为 rejected，传递失败原因}}, 1000);
});

2. 处理 Promise 结果

通过 then()、catch()、finally() 方法处理异步操作的结果：

then(onFulfilled, onRejected)：处理成功或失败的结果。onFulfilled 接收 resolve 传递的值，onRejected 接收 reject 传递的错误（可选）。
catch(onRejected)：专门处理失败的结果（相当于 then(null, onRejected)），更清晰。
finally(onFinally)：无论成功或失败都会执行（如清理操作），无参数。

// 处理结果
promise.then((result) => {console.log("成功：", result); // 1秒后输出 "成功：操作成功的结果"}).catch((error) => {console.log("失败：", error); // 若success为false，输出 "失败：操作失败的原因"}).finally(() => {console.log("操作结束（无论成败）");});

三、Promise 的链式调用

then() 和 catch() 方法会返回一个新的 Promise 对象，因此可以通过链式调用处理多个连续的异步操作，避免回调地狱。

// 示例：多个异步操作按顺序执行
new Promise((resolve) => {setTimeout(() => resolve(1), 1000); // 第一步：1秒后返回1
}).then((num) => {console.log(num); // 输出1return num + 1; // 返回值会作为下一个then的参数}).then((num) => {console.log(num); // 输出2return new Promise((resolve) => { // 返回新的PromisesetTimeout(() => resolve(num + 1), 1000);});}).then((num) => {console.log(num); // 输出3（2秒后）});

四、Promise 常用静态方法

1. `Promise.resolve(value)`

快速创建一个已成功的 Promise，直接返回 value（若 value 本身是 Promise，则直接返回它）。

Promise.resolve("直接成功").then((res) => console.log(res)); // 输出 "直接成功"

2. `Promise.reject(error)`

快速创建一个已失败的 Promise，直接返回 error。

Promise.reject("直接失败").catch((err) => console.log(err)); // 输出 "直接失败"

3. `Promise.all(iterable)`

接收一个 Promise 数组，等待所有 Promise 都成功后才成功，返回结果数组；只要有一个失败就立即失败，返回第一个失败的原因。

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);Promise.all([p1, p2, p3]).then((res) => {console.log(res); // 输出 [1, 2, 3]（所有成功）
});const p4 = Promise.reject("出错了");
Promise.all([p1, p4, p3]).catch((err) => {console.log(err); // 输出 "出错了"（p4失败）
});

4. `Promise.race(iterable)`

接收一个 Promise 数组，只要有一个 Promise 状态改变（成功或失败），就立即返回该结果（“竞速” 机制）。

const pFast = new Promise((resolve) => setTimeout(resolve, 100, "快的"));
const pSlow = new Promise((resolve) => setTimeout(resolve, 200, "慢的"));Promise.race([pFast, pSlow]).then((res) => {console.log(res); // 输出 "快的"（pFast先完成）
});

5. `Promise.allSettled(iterable)`

等待所有 Promise 都完成（无论成功或失败），返回一个包含所有结果的数组（每个结果包含 status 和 value/reason）。

const p1 = Promise.resolve(1);
const p2 = Promise.reject("出错了");Promise.allSettled([p1, p2]).then((results) => {console.log(results);// 输出：// [//   { status: "fulfilled", value: 1 },//   { status: "rejected", reason: "出错了" }// ]
});

五、Promise 解决的问题

回调地狱：通过链式调用替代多层嵌套回调，代码更扁平。例如，传统回调嵌套：

// 回调地狱（多层嵌套，可读性差）
async1(() => {async2(() => {async3(() => {// ...});});
});

用 Promise 优化后：

async1().then(() => async2()).then(() => async3()).then(() => { /* ... */ });

异步操作的状态管理：明确区分成功 / 失败状态，避免回调函数的不确定性。
批量异步操作：通过 all、race 等方法简化多个异步操作的协调。

六、注意事项

状态不可逆：一旦从 pending 变为 fulfilled 或 rejected，就无法再改变。
错误捕获：链式调用中，catch() 可以捕获前面所有 then() 中的错误（包括同步错误）。
避免冗余包装：如果已经有返回 Promise 的函数，无需再用 new Promise 包装。
与 async/await 配合：Promise 是 async/await 的基础，async 函数返回的是 Promise，await 可以简化 Promise 的链式调用（更推荐）。