手把手教你手写Promise代码

资源摘要信息:"JS代码-Promise 手写" 知识点： Promise是JavaScript中处理异步操作的一种机制，是ES6引入的一种新的原始对象。Promise允许你将异步操作表示为一个序列，并按照代码的执行顺序来处理异步结果。Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。状态的转换是单向的，一旦从pending转换到fulfilled或rejected，状态就固定了，无法再改变。 手写Promise是JS学习中的一个高级话题，它可以帮助我们更加深入理解Promise的工作机制。下面，我将详细介绍Promise的内部实现原理以及如何手写一个简单的Promise。 首先，Promise构造函数接收一个执行器（executor）作为参数，执行器函数有两个参数，分别是resolve和reject函数。这两个函数都是Promise提供的内置函数，用于改变Promise的状态。 Promise有几个重要的方法： - then方法：接收两个参数，分别是Promise状态变为fulfilled和rejected时的回调函数。then方法会返回一个Promise对象，所以可以链式调用。 - catch方法：它是then方法的语法糖，接收一个参数，即Promise状态变为rejected时的回调函数。 - finally方法：无论Promise状态是fulfilled还是rejected，finally方法都会被执行。finally方法可以接收一个回调函数作为参数，这个回调函数没有参数。 下面是一个手写的Promise示例代码： ```javascript // 手写Promise class MyPromise { // Promise状态 state = 'pending'; // 初始状态 value = undefined; // 成功时的值 reason = undefined; // 失败时的原因 onFulfilledCallbacks = []; // 成功时的回调 onRejectedCallbacks = []; // 失败时的回调 constructor(executor) { const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach((fn) => fn(this.value)); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach((fn) => fn(this.reason)); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value; onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason; }; const promise2 = new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } else if (this.state === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } else if (this.state === 'pending') { this.onFulfilledCallbacks.push((value) => { setTimeout(() => { try { const x = onFulfilled(value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push((reason) => { setTimeout(() => { try { const x = onRejected(reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); } }); return promise2; } resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError('Chaining cycle detected for promise')); } let called; if ((typeof x === 'object' && x != null) || typeof x === 'function') { try { let then = x.then; if (typeof then === 'function') { then.call(x, y => { if (called) return; called = true; this.resolvePromise(promise2, y, resolve, reject); }, r => { if (called) return; called = true; reject(r); }); } else { resolve(x); } } catch (error) { if (called) return; called = true; reject(error); } } else { resolve(x); } } } module.exports = MyPromise; ``` 以上代码实现了一个基本的Promise，包括状态管理和then方法。需要注意的是，这个实现非常简化，没有处理一些复杂的边缘情况，也没有实现catch和finally方法。在实际开发中，我们会使用JavaScript内置的Promise，除非有特殊需要，一般不需要自己实现Promise。