深入理解JavaScript自定义Promise实现原理

资源摘要信息:"在编程语言JavaScript中，Promise是一种用于处理异步操作的编程模型。它允许我们将异步操作的结果封装起来，并通过then、catch等方法来处理这个结果。Promise对象有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。一旦Promise的状态改变，就不会再变，即从pending变为fulfilled或rejected后，状态将被锁定。 自定义Promise是指编写自己的Promise实现，而不是使用JavaScript原生提供的Promise对象。在自定义Promise的过程中，我们需要自己来实现一个构造函数，以及then和catch等方法。 以下是一个自定义Promise的示例代码： ``` // 自定义Promise实现 class MyPromise { // Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败） static PENDING = 'pending'; static FULFILLED = 'fulfilled'; static REJECTED = 'rejected'; constructor(executor) { // 初始状态为pending this.state = MyPromise.PENDING; this.value = null; this.reason = null; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; // 成功时的回调函数 let resolve = (value) => { if (this.state === MyPromise.PENDING) { this.state = MyPromise.FULFILLED; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); } }; // 失败时的回调函数 let reject = (reason) => { if (this.state === MyPromise.PENDING) { this.state = MyPromise.REJECTED; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); } }; try { // 立即执行传入的执行器 executor(resolve, reject); } catch (error) { // 捕获执行器中的错误 reject(error); } } then(onFulfilled, onRejected) { // 如果onFulfilled或者onRejected不是函数，就忽略它们 onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value; onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }; let promise2 = new MyPromise((resolve, reject) => { if (this.state === MyPromise.FULFILLED) { // 需要使用setTimeout来保证then函数中的代码是异步执行的 setTimeout(() => { try { let x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); } else if (this.state === MyPromise.REJECTED) { setTimeout(() => { try { let x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); } else if (this.state === MyPromise.PENDING) { // 如果当前的Promise处于pending状态，则不能确定调用then中的哪个函数，需要将函数保存起来 this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { let x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { let x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); }); } }); return promise2; } resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError('Chaining cycle detected for promise')); } if ((typeof x === 'object' && x !== null) || typeof x === 'function') { try { let then = x.then; if (typeof then === 'function') { then.call(x, y => { if (promise2 === y) { return reject(new TypeError('Chaining cycle detected for promise')); } this.resolvePromise(promise2, y, resolve, reject); }, r => { if (promise2 === r) { return reject(new TypeError('Chaining cycle detected for promise')); } reject(r); }); } else { resolve(x); } } catch (error) { reject(error); } } else { resolve(x); } } } module.exports = MyPromise; ``` 以上代码实现了一个基本的Promise功能。它包含了状态转换、then方法、异步执行和错误处理等核心功能。需要注意的是，这个自定义Promise的实现并不完全等同于JavaScript原生Promise的全部特性，但它足够展示Promise的基本工作原理。 自定义Promise可以让我们更好地理解Promise的工作机制，并且在一些特定的环境下，如果JavaScript原生Promise不适用或者不被支持，我们可以使用自己实现的Promise来处理异步操作。"