JS进阶-手写Promise

一、什么是Promise

在Promise A+规范中规定，Promise是一个有一个符合规范的then方法的对象或者函数。

1.关于then

• then接收onFulfilled和onRejected两个可选参数；
• then必须返回一个新的Promise对象；
• 如果onFulfilled是一个函数
  • 在状态切换为fulfilled之后调用；
  • 不能被多次调用。
• 如果onRejected是一个函数
  • 在状态切换为rejected是被调用；
  • 不能被多次调用。

2.状态

• pending: 初始状态，会转换为下面的俩个状态；
• fulfilled: 成功状态，不会再转为其他状态；
• rejected: 失败状态，不会再转为其他状态。

3.关于ES6中的Promise

• 构造函数接受一个回调函数executor；
• executor接受两个参数resolve、reject；
• executor在new Promise是被同步调用；
• 任务被解决时，调用resolve，并传入结果；
• 任务被拒绝时，调用reject，并传入拒绝原因；
• Promise对象除了then还有catch和finally两个函数；
• Promise有all、resolve等静态函数。

二、实现

1.状态定义

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

2.功能实现

class MyPromise {// 当前状态#state = PENDING;// 解决或拒绝的结果#result = undefined;// 通关连环then注册的回调#handlers = [];// 构造函数constructor(executor) {// 定义两个状态切换函数const resolve = (data) => {this.#setState(FULFILLED, data);};const reject = (reason) => {this.#setState(REJECTED, reason);};// 同步调用参数函数try {executor(resolve, reject);} catch (error) {reject(error);}}// 状态切换#setState(state, result) {if (this.#state !== PENDING) return;this.#state = state;this.#result = result;this.#run();}// 执行then注册的所有任务#run() {if (this.#state === PENDING) return;// 遍历所有注册的回调while(this.#handlers.length > 0){const handler = this.#handlers.shift();const {resolve, reject, onFulfilled, onRejected} = handler;// 根据结果执行每个任务if (this.#state === FULFILLED) {this.#runOne(onFulfilled, resolve, reject);} else if (this.#state === REJECTED) {this.#runOne(onRejected, resolve, reject);}}}// 执行一个任务#runOne() {// 将任务放入微队列，等待被执行this.#runMicroTask(() => {if (typeof callback !== 'function') {// 不是函数的话，透传一下当前结果if (this.#state === FULFILLED) {resolve(this.#result);} else {reject(this.#result);}return;}try {const data = callback(this.#result);if (this.#isPromiseLike(data)) {// 结果是Priomise的话data.then(resolve, reject);} else {// 不是Promise的话直接完成，并传递结果resolve(data);}} catch (error) {reject(error);}});}// 按Promise A+规范判断参数是否是一个Promise#isPromiseLike(value) {if (value !== null && (typeof value === 'object' || typeof value === 'function')) {return typeof value.then === 'function';}return false;}// 将任务放入微队列#runMicroTask(func) {if (typeof process === 'object' && typeof process.nextTick === 'function') {// 在nodejs中process.nextTick(func);} else if (typeof MutationObserver === 'function') {// 在浏览器中const textNode = document.createTextNode('1');const ob = new MutationObserver(func);// 让ob观察textNode的字符串变化，观察到之后会将构造函数// 中传入的func加入微队列执行ob.observe(textNode, {characterData: true,});textNode.data = '2';} else {// 没有上述环境，只能用宏队列代替了setTimeout(func, 0);}}then(onFulfilled, onRejected) {// 返回新Promisereturn new MyPromise((resolve, reject) => {// 将任务存起来this.#handlers.push({resolve,reject,onFulfilled,onRejected,});this.#run();});}
}