pc网站与手机网站,wordpress广告联盟插件,常见的企业网站有哪些,长安网站制作公司一、什么是Promise
在Promise A规范中规定#xff0c;Promise是一个有一个符合规范的then方法的对象或者函数。
1.关于then
then接收onFulfilled和onRejected两个可选参数#xff1b;then必须返回一个新的Promise对象#xff1b;如果onFulfilled是一个函数 在状态切换为f…一、什么是Promise
在Promise A规范中规定Promise是一个有一个符合规范的then方法的对象或者函数。
1.关于then
then接收onFulfilled和onRejected两个可选参数then必须返回一个新的Promise对象如果onFulfilled是一个函数 在状态切换为fulfilled之后调用不能被多次调用。如果onRejected是一个函数 在状态切换为rejected是被调用不能被多次调用。
2.状态
pending: 初始状态会转换为下面的俩个状态fulfilled: 成功状态不会再转为其他状态rejected: 失败状态不会再转为其他状态。
3.关于ES6中的Promise
构造函数接受一个回调函数executorexecutor接受两个参数resolve、rejectexecutor在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();});}
}
