JavaScript Promise 功能用法运用详解-编程知识

JavaScript Promise 功能用法运用详解

news/2025/3/10 21:22:33/文章来源:https://www.cnblogs.com/baisemoshui/p/18763702

JavaScript Promise 功能、用法与运用详解

一、功能

Promise 是 JavaScript 中用于处理异步操作的一种机制。它代表了一个异步操作的最终完成（或失败）及其结果值。Promise 的主要功能是：

避免回调地狱：在异步编程中，当需要处理多个异步操作时，回调函数容易相互嵌套，形成“回调地狱”。Promise 通过链式调用的方式，可以清晰地组织异步代码，提高代码的可读性和可维护性。
状态管理：Promise 有三种状态：Pending（进行中）、Fulfilled（已成功）和 Rejected（已失败）。通过状态管理，可以清晰地知道异步操作的结果。
错误处理：Promise 提供了 .catch() 方法，可以捕获异步操作中的错误，并进行统一处理。

二、用法

1. 创建 Promise

使用 new Promise() 构造函数来创建一个 Promise 对象。构造函数接受一个执行器函数（executor function）作为参数，该函数有两个参数：resolve 和 reject。

resolve：当异步操作成功时调用，将 Promise 的状态变为 Fulfilled，并传递一个值作为操作的结果。
reject：当异步操作失败时调用，将 Promise 的状态变为 Rejected，并传递一个错误对象作为失败的原因。

示例：

const promise = new Promise((resolve, reject) => {// 模拟异步操作setTimeout(() => {const success = true;if (success) {resolve("操作成功");} else {reject(new Error("操作失败"));}}, 1000);
});

2. 使用 then 和 catch

.then()：用于指定 Promise 状态变为 Fulfilled 时要执行的操作。它接受两个参数：
- 第一个参数是处理 Fulfilled 状态的回调函数，该回调函数会接收 resolve 函数传递的值。
- 第二个参数是可选的，用于处理 Rejected 状态的回调函数，该回调函数会接收 reject 函数传递的错误对象。
.catch()：用于捕获 Promise 链中的错误。它相当于 .then(null, onRejected)，即只处理 Rejected 状态。

示例：

promise.then((result) => {console.log(result); // 输出 "操作成功"}).catch((error) => {console.error(error); // 如果操作失败，输出错误信息});

3. 链式调用

Promise 支持链式调用，即可以在一个 .then() 方法后继续调用另一个 .then() 方法。每个 .then() 方法都会返回一个新的 Promise 对象，这样可以将多个异步操作串联起来。

示例：

promise.then((result) => {console.log(result); // 输出 "操作成功"return new Promise((resolve) => {setTimeout(() => {resolve("第二个异步操作完成");}, 1000);});}).then((result) => {console.log(result); // 输出 "第二个异步操作完成"}).catch((error) => {console.error(error); // 捕获错误});

4. finally 方法

.finally() 方法用于指定无论 Promise 的状态是 Fulfilled 还是 Rejected，都会执行的操作。它不接受任何参数，其回调函数没有返回值。

示例：

promise.then((result) => {console.log(result); // 输出 "操作成功"}).catch((error) => {console.error(error); // 捕获错误}).finally(() => {console.log("异步操作完成"); // 无论结果如何，都会执行});

三、高级用法

1. Promise.all

Promise.all() 方法用于并行执行多个 Promise 对象，并在所有 Promise 对象都变为 Fulfilled 时，返回一个新的 Promise 对象，其决议值是一个包含所有 Promise 对象决议值的数组。如果有任何一个 Promise 对象变为 Rejected，则返回的 Promise 对象也会变为 Rejected，并传递第一个被拒绝的 Promise 对象的拒绝理由。

示例：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);Promise.all([promise1, promise2, promise3]).then((results) => {console.log(results); // 输出 [1, 2, 3]}).catch((error) => {console.error(error); // 捕获错误});

2. Promise.race

Promise.race() 方法返回一个新的 Promise，该 Promise 在其第一个完成的 Promise（无论是 Fulfilled 还是 Rejected）解决或拒绝后，以相同的解决值或拒绝理由解决或拒绝。

示例：

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'two'));Promise.race([promise1, promise2]).then((value) => {console.log(value); // 输出 "two"，因为 promise2 先完成}).catch((error) => {console.error(error); // 捕获错误});

3. Promise.allSettled

Promise.allSettled() 方法接收一个 Promise 对象数组，并返回一个在所有给定的 Promise 都已解决或被拒绝后解析的新 Promise，并带有一个对象数组，每个对象表示对应的 Promise 结果。

示例：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('2'));
const promise3 = Promise.resolve(3);Promise.allSettled([promise1, promise2, promise3]).then((results) => {console.log(results);/* 输出：[{ status: 'fulfilled', value: 1 },{ status: 'rejected', reason: Error: 2 },{ status: 'fulfilled', value: 3 }]*/}).catch((error) => {console.error(error); // 捕获错误});