promise用法总结以及手写promise

JavaScript中的 Promise 是用于处理异步操作的对象，它代表了一个异步操作的最终完成（或失败）及其结果值。Promise 是异步编程的一种更简洁和更可读的方式，避免了回调地狱的问题。

Promise 的基本概念 一个 Promise 是一个表示异步操作最终完成（或失败）并返回结果的对象。Promise 具有三种状态：

Pending（待定）：初始状态，表示异步操作尚未完成。 Resolved/Fulfilled（已完成）：操作成功完成，返回值。 Rejected（已拒绝）：操作失败，返回错误信息。 2. Promise 构造函数

let promise = new Promise((resolve, reject) => { // 异步操作 if (成功) { resolve(结果); // 操作成功，返回结果 } else { reject(错误信息); // 操作失败，返回错误信息 } });

resolve(value)：改变 Promise 状态为 fulfilled，并传递一个值。 reject(error)：改变 Promise 状态为 rejected，并传递一个错误。 3. Promise 的状态转换 初始状态：pending 状态1：resolved，调用 resolve()。 状态2：rejected，调用 reject()。 4. Promise 的链式调用 Promise 支持链式调用，可以通过 .then()、.catch() 和 .finally() 来处理异步操作的结果。

4.1 then() then() 用于定义成功和失败的回调函数。

promise .then((result) => { console.log('成功：', result); }) .catch((error) => { console.error('失败：', error); });

then() 接受两个回调函数： 第一个回调函数用于处理成功的结果。 第二个回调函数用于处理失败的结果（可选）。 4.2 catch() catch() 用于捕获并处理异常。通常与 then() 一起使用。

promise .then(result => { console.log(result); }) .catch(error => { console.error(error); });

4.3 finally() finally() 用于在 Promise 完成（无论是成功还是失败）后执行清理操作。

promise .then(result => { console.log('成功：', result); }) .catch(error => { console.error('失败：', error); }) .finally(() => { console.log('无论成功或失败，都执行'); }); Promise 的常见静态方法 5.1 Promise.resolve() Promise.resolve() 返回一个已经解决的 Promise，其值是传入的参数。 let promise = Promise.resolve(42); promise.then(value => { console.log(value); // 输出 42 });

5.3 Promise.all() Promise.all() 接收一个 Promise 数组，返回一个新的 Promise，当所有的 Promise 都成功时，该 Promise 会成功，返回一个数组。只要有一个 Promise 失败，整个 Promise.all() 就会失败。

Promise.all([promise1, promise2, promise3]) .then(results => { console.log(results); // 所有 promise 成功时的结果数组 }) .catch(error => { console.error(error); // 如果有一个失败，捕获错误 });

5.4 Promise.allSettled() Promise.allSettled() 接收一个 Promise 数组，返回一个新的 Promise，无论所有的 Promise 是成功还是失败，都会在所有 Promise 结束后返回。

Promise.allSettled([promise1, promise2]) .then(results => { console.log(results); // 输出每个 promise 的状态（fulfilled/rejected） });

5.5 Promise.race() Promise.race() 返回一个新的 Promise，它会在第一个 Promise 完成（无论是成功还是失败）时返回。

Promise.race([promise1, promise2]) .then(result => { console.log(result); // 第一个完成的 promise 的结果 }) .catch(error => { console.error(error); // 第一个失败的 promise 错误 });

5.6 Promise.any() Promise.any() 返回一个新的 Promise，它会在第一个成功的 Promise 返回时成功。如果所有的 Promise 都失败，返回一个 AggregateError。

Promise.any([promise1, promise2]) .then(result => { console.log(result); // 第一个成功的 promise 的结果 }) .catch(error => { console.error(error); // 如果所有 promise 都失败，捕获错误 });

Promise 的手动实现 实现一个基本的 Promise 类： class MyPromise { constructor(executor) { this.state = ‘pending’; // 初始状态 this.value = undefined; // 成功时的值 this.reason = undefined; // 失败时的原因

this.onFulfilled = []; // 存储成功的回调 this.onRejected = []; // 存储失败的回调

const resolve = (value) => { if (this.state === ‘pending’) { this.state = ‘fulfilled’; this.value = value; this.onFulfilled.forEach(fn => fn(value)); } };

const reject = (reason) => { if (this.state === ‘pending’) { this.state = ‘rejected’; this.reason = reason; this.onRejected.forEach(fn => fn(reason)); } };

executor(resolve, reject); }

then(onFulfilled, onRejected) { return new MyPromise((resolve, reject) => { if (this.state === ‘fulfilled’) { const result = onFulfilled(this.value); resolve(result); } else if (this.state === ‘rejected’) { const result = onRejected(this.reason); reject(result); } else { this.onFulfilled.push(() => { const result = onFulfilled(this.value); resolve(result); }); this.onRejected.push(() => { const result = onRejected(this.reason); reject(result); }); } }); } }