Promise源码实现class版

class封装完整版 (function(window){ // 进行中状态 const _PENDING = "pending"; // 已成功状态 const _RESOLVED = "resolved"; // 已失败状态 const _REJECTED = "rejected"; class MyPromise { constructor(executor) { // 设置状态初始值为 pending this.status = _PENDING; // 设置初始值为 undefined this.value = undefined; // 添加回调函数队列 this.onCallBacks = []; // 成功时执行 function _resolve(value) { if (this.status !== "pending") return; // 修改 MyPromise 对象的状态为 resolve this.status = _RESOLVED; // 保存成功的数据 this.value = value; //检查回调数组中是否存在数据 if (this.onCallBacks.length > 0) { // 异步执行 setTimeout(() => { this.onCallBacks.forEach(onCb => { onCb.onResolved.call(this); }); }); } } // 失败时执行 function _reject(reason) { if (this.status !== "pending") return; // 修改 MyPromise 对象的状态为 resolve this.status = _REJECTED; // 保存失败的数据 this.value = reason; //检查回调数组中是否存在数据 if (this.onCallBacks.length > 0) { // 异步执行 setTimeout(() => { this.onCallBacks.forEach(onCb => { onCb.onRejected.call(this); }); }); } } try { // 立即执行 executor executor(_resolve.bind(this), _reject.bind(this)) } catch (err) { _reject.call(this, err); } } then(onResolved, onRejected) { return new MyPromise((resolve, reject) => { /* * 参数 cb 的值为 onResolved 或 onRejected 函数 * */ function _callback(cb) { // 增加try方法，如果出现异常，执行reject try { let result = cb(this.value); // 判断返回结果是否为MyPromise类型 if (result instanceof MyPromise) { // result 是 MyPromise，下面这行代码是上方代码的简写形式 result.then(resolve, reject); } else { // 非MyPromise类型，将结果直接传递过去 resolve(result); } } catch (err) { // 出现异常，执行reject reject(err); } } // 防止使用者不传成功或失败回调函数，所以成功失败回调都给了默认回调函数 onResolved = typeof onResolved === "function" ? onResolved : value => value; onRejected = typeof onRejected === "function" ? onRejected : error => { throw error }; switch (this.status) { // 当状态为resolve时，执行onResolved，并传递结果 case _RESOLVED: // 通过 setTimeout 让代码异步执行 setTimeout(() => { _callback.call(this, onResolved); }); break; // 当状态为reject时，执行onRejected，并传递结果 case _REJECTED: // 通过 setTimeout 让代码异步执行 setTimeout(() => { _callback.call(this, onRejected); }); break; // 当状态为 pending 时，将要执行的回调函数放置到队列中，待状态更改完毕后再调用。 case _PENDING: this.onCallBacks.push({ onResolved() { //获取回调函数的执行结果 _callback.call(this, onResolved); }, onRejected() { _callback.call(this, onRejected); } }); break; } }) } catch = function (onRejected) { return this.then(undefined, onRejected); } // 函数对象 resolve 的封装 static resolve(value) { return new MyPromise((resolve, reject) => { if (value instanceof MyPromise) { value.then(resolve, reject); } else { resolve(value); } }); } // 函数对象 reject 的封装 static reject(reason) { return new MyPromise((resolve, reject) => { reject(reason); }) } //函数对象 all 的封装 static all(MyPromises) { return new MyPromise((resolve, reject) => { let pValues = []; let flag = 0; for (let i = 0; i < MyPromises.length; i++) { MyPromises[i].then(v => { pValues[i] = v; flag++; if (flag >= MyPromises.length) { resolve(pValues); } }, r => { reject(r); }) } }); } //函数对象 race static race(MyPromises) { return new MyPromise((resolve, reject) => { for (let i = 0; i < MyPromises.length; i++) { MyPromises[i].then(value => { resolve(value); }, reason => { reject(reason); }) } }); } } window.MyPromise = MyPromise; })(window) —————END————— 喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容！！

本文章由javascript技术分享原创和收集