设计得好的网站推荐成都网站优化平台
一、什么是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();});}
}