Promise源码实现

Promise使用

let promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('promise')}, 1000);
})
promise.then((data) => {console.log(data)
}, (err) => {console.log(err)
})
复制代码

Promise类实现实现

class Promise {constructor(executor) {// 默认状态是等待态this.status = 'pending';this.value = undefined;this.reason = undefined;// 存放成功的回调this.onResolvedCallbacks = [];// 存放失败的回调this.onRejectedCallbacks = [];let resolve = (data) => {if (this.status === 'pending') {this.value = data;this.status = 'resolved';this.onResolvedCallbacks.forEach(fn => fn());}}let reject = (reason) => {if (this.status === 'pending') {this.reason = reason;this.status = 'rejected';this.onRejectedCallbacks.forEach(fn => fn());}}try { // 执行时可能会发生异常executor(resolve, reject);} catch (e) {reject(e); // promise失败了}}
}
复制代码

Promise原型then方法实现

class Promise {constructor(executor) {...}then(onFulFilled, onRejected) {if (this.status === 'resolved') {onFulFilled(this.value);}if (this.status === 'rejected') {onRejected(this.reason);}// 当前既没有完成 也没有失败if (this.status === 'pending') {// 存放成功的回调this.onResolvedCallbacks.push(() => {onFulFilled(this.value);});// 存放失败的回调this.onRejectedCallbacks.push(() => {onRejected(this.reason);});}}
}
复制代码

• then方法可以返回值或者Promise, resolvePromise方法处理

function resolvePromise(promise2, x, resolve, reject) {// 判断x是不是promise// 规范里规定了一段代码，这个代码可以实现我们的promise和别人的promise可以进行交互if (promise2 === x) { // 不能自己等待自己完成return reject(new TypeError('循环引用'));}// x不是null或者是对象或者函数if (x !== null && (typeof x === 'object' || typeof x === 'function')) {let called; // 防止成功后调用失败try { // 防止取then是出现异常 Object.definePropertylet then = x.then; // 取x的then方法 {then:{}}if (typeof then === 'function') { // 如果then是函数我就认为它是promise// call 第一个参数是this ，后面的是成功的回调和失败的回调then.call(x, y => { // 如果y是promise就继续递归解析promiseif(called) return;called = true;resolvePromise(promise2,y,resolve,reject);}, r => { // 只要失败了就失败了if (called) return;called = true;reject(r);});}else{ // then是一个普通对象，就直接成功即可1resolve(x);}} catch (e) {if (called) return;called = true;reject(e);}} else { // x = 123resolve(x); // x就是一个普通值}
}
class Promise {constructor(executor) {...}then(onFulFilled, onRejected) {let promise2;if (this.status === 'resolved') {promise2 = new Promise((resolve, reject) => {// 成功的逻辑 失败的逻辑let x = onFulFilled(this.value);// 看x是不是promise 如果是promise 取他的结果 作为promise2,成功的结果// 如果要是返回一个普通值 作为promise2,成功的结果// resolvePromise可以解析x和promise2之间的关系resolvePromise(promise2, x, resolve, reject);});}if (this.status === 'rejected') {promise2 = new Promise((resolve, reject) => {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject)});}// 当前既没有完成 也没有失败if (this.status === 'pending') {// 存放成功的回调promise2 = new Promise((resolve, reject) => {this.onResolvedCallbacks.push(() => {let x = onFulFilled(this.value);resolvePromise(promise2, x, resolve, reject)});// 存放失败的回调this.onRejectedCallbacks.push(() => {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);});})}return promise2; // 调用then后返回一个新的promise}
}
复制代码

• then方法穿透的处理

class Promise {constructor(executor) {...}then(onFulFilled, onRejected) {onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };let promise2;if (this.status === 'resolved') {promise2 = new Promise((resolve, reject) => {setTimeout(() => {try {let x = onFulFilled(this.value);resolvePromise(promise2, x, resolve, reject);} catch (e) {reject(e);}}, 0);});}if (this.status === 'rejected') {promise2 = new Promise((resolve, reject) => {setTimeout(() => {try {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject)} catch (e) {reject(e);}}, 0);});}if (this.status === 'pending') {promise2 = new Promise((resolve, reject) => {this.onResolvedCallbacks.push(() => {setTimeout(() => {try {let x = onFulFilled(this.value);resolvePromise(promise2, x, resolve, reject)} catch (e) {reject(e);}}, 0)});// 存放失败的回调this.onRejectedCallbacks.push(() => {setTimeout(() => {try {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);} catch (e) {reject(e);}}, 0);});})}return promise2; // 调用then后返回一个新的promise}// catch接收的参数 只用错误catch(onRejected) {// catch就是then的没有成功的简写return this.then(null, onRejected);}
}
复制代码

Promose静态方法resolve, reject, all, race实现

Promise.resolve = function (val) {return new Promise((resolve, reject) => resolve(val))
}
Promise.reject = function (val) {return new Promise((resolve, reject) => reject(val));
}
Promise.race = function (promises) {return new Promise((resolve, reject) => {for (let i = 0; i < promises.length; i++) {promises[i].then(resolve, reject);}});
}
Promise.all = function (promises) {return new Promise((resolve,reject)=>{let arr = [];let i = 0; // i的目的是为了保证获取全部成功，来设置的索引function processData(index,data) {arr[index] = data;i++;if (i === promises.length){resolve(arr);}}for(let i = 0;i<promises.length;i++){promises[i].then(data=>{processData(i,data);}, reject);}})
}
复制代码

Promise源码实现大概就这些内容，作为学习的一个记录，希望对大家有所帮助