深入理解Promise

原文合集地址如下，有需要的朋友可以关注

本文地址

合集地址

什么是Promise

当谈论 Promise 时，可以将其比喻为一种承诺或契约，用于处理异步操作的结果。异步操作是指那些不会立即完成的操作，比如从服务器获取数据、读取文件、发送网络请求等等。通常情况下，这些操作需要一定的时间来完成。

Promise 的主要目的是在异步操作完成后，通过 Promise 对象来获取操作的结果或处理操作的失败情况。Promise 可以有三种状态：进行中（Pending）、已成功（Fulfilled）和已失败（Rejected）。

1. 进行中（Pending）：Promise 刚被创建时的初始状态，表示异步操作正在进行中，尚未完成或失败。

2. 已成功（Fulfilled）：当异步操作成功完成时，Promise 的状态变为已成功，同时携带着异步操作的结果值。

3. 已失败（Rejected）：当异步操作失败时，Promise 的状态变为已失败，同时携带着失败的原因，通常是一个错误对象。

创建一个 Promise对象需要使用 new Promise() 构造函数，它接收一个带有 resolve 和 reject 两个参数的执行函数作为参数：

const myPromise = new Promise((resolve, reject) => {// 异步操作（例如，从服务器获取数据或读取文件）// 如果异步操作成功，调用 resolve 并传递结果值// 如果异步操作失败，调用 reject 并传递失败原因
});

resolve 函数用于将 Promise 状态从进行中转换为已成功，而 reject 函数用于将状态从进行中转换为已失败。

一旦创建了 Promise 对象，就可以通过使用 .then() 方法来添加异步操作成功的回调，并使用 .catch() 方法来添加异步操作失败的回调：

myPromise.then((result) => {// 异步操作成功，获取 result 结果值
}).catch((error) => {// 异步操作失败，获取 error 失败原因
});

Promise 还支持链式调用，
可以通过多次使用 .then() 方法来串联多个异步操作：

myPromise.then((result) => {// 第一个异步操作成功，获取 result 结果值// 返回一个新的 Promise 对象return anotherAsyncOperation(result);
}).then((anotherResult) => {// 第二个异步操作成功，获取 anotherResult 结果值
}).catch((error) => {// 如果任何一个异步操作失败，获取 error 失败原因
});

Promise 的主要方法：

1. Promise.prototype.then(onFulfilled, onRejected)：用于添加异步操作成功（Fulfilled）和失败（Rejected）的回调函数。onFulfilled 是异步操作成功时的回调函数，接收成功的结果值作为参数；onRejected 是异步操作失败时的回调函数，接收失败的原因作为参数。

2. Promise.prototype.catch(onRejected)：用于添加异步操作失败的回调函数，相当于 .then(null, onRejected)。

3. Promise.prototype.finally(onFinally)：在 Promise 的状态变为 Fulfilled 或 Rejected 时，都会执行 onFinally 回调函数。该方法不接收任何参数，它返回一个新的 Promise 对象，该 Promise 对象的状态和值与原始 Promise 对象一致。

4. Promise.resolve(value)：返回一个以给定值 value 解析的 Promise 对象。如果 value 是一个 Promise 对象，则直接返回它；如果 value 是一个 thenable 对象（即具有 then 方法的对象），则会将它转换成一个 Promise 对象并返回。

5. Promise.reject(reason)：返回一个以给定原因 reason 拒绝的 Promise 对象。

下面是一个简单的示例，展示如何使用 Promise 来处理异步操作：

function fetchUserData() {return new Promise((resolve, reject) => {// 模拟异步请求setTimeout(() => {const userData = { name: 'John', age: 30 };// 模拟异步请求成功resolve(userData);// 模拟异步请求失败// reject(new Error('Failed to fetch user data'));}, 1000);});
}