如何從零開始利用js手寫一個(gè)Promise庫詳解

const promise = new Promise(function(resolve, reject) {
 // ... some code

 if (/* 異步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(error) {
 // failure
});

class CutePromise {
 // executor是我們實(shí)例化CutePromise時(shí)傳入的參數(shù)函數(shù)，它接受兩個(gè)參數(shù)，分別是resolve和reject。
 // resolve和reject我們將會定義在constructor當(dāng)中，供executor在執(zhí)行的時(shí)候調(diào)用
 constructor(executor) {
 const resolve = () => {}
 const reject = () => {}
 executor(resolve, reject)
 }

 // 為實(shí)例提供一個(gè)then的方法，接收兩個(gè)參數(shù)函數(shù)，
 // 第一個(gè)參數(shù)函數(shù)必傳，它會在promise已成功(fulfilled)以后被調(diào)用
 // 第二個(gè)參數(shù)非必傳，它會在promise已失敗(rejected)以后被調(diào)用
 then(onFulfilled, onRejected) {}
}

constructor(executor) {
 ...
 this.state = 'PENDING';
 ...
 const resolve = (result) => {
 this.state = 'FULFILLED';
 this.value = result;
 }
 const reject = (error) => {
 this.state = 'REJECTED';
 this.value = error;
 }
 ...
}

constructor(executor) {
 ...
 this.state = 'PENDING';
 
 // chained用來儲存promise執(zhí)行完成以后，需要被依次調(diào)用的一系列函數(shù)
 this.chained = [];
 const resolve = (result) => {
 this.state = 'FULFILLED';
 this.value = result;
 
 // promise已經(jīng)執(zhí)行成功了，可以依次調(diào)用.then()函數(shù)里的onFulfilled函數(shù)了
 for (const { onFulfilled } of this.chained) {
 onFulfilled(res);
 }
 }

 ...
}
then(onFulfilled, onRejected) {
 if (this.state === 'FULFILLED') {
 onFulfilled(this.value);
 } else if (this.state === 'REJECTED') {
 onRejected(this.value);
 } else {
 this.$chained.push({ onFulfilled, onRejected });
 }
}

class CutePromise {
 constructor(executor) {
 if (typeof executor !== 'function') {
 throw new Error('Executor must be a function');
 }

 this.state = 'PENDING';
 this.chained = [];
 const resolve = res => {
 if (this.state !== 'PENDING') {
 return;
 }

 this.state = 'FULFILLED';
 this.internalValue = res;
 for (const { onFulfilled } of this.chained) {
 onFulfilled(res);
 }
 };
 const reject = err => {
 if (this.state !== 'PENDING') {
 return;
 }
 this.state = 'REJECTED';
 this.internalValue = err;
 for (const { onRejected } of this.chained) {
 onRejected(err);
 }
 };

 try {
 executor(resolve, reject);
 } catch (err) {
 reject(err);
 }
 }
 
 then(onFulfilled, onRejected) {
 if (this.state === 'FULFILLED') {
 onFulfilled(this.internalValue);
 } else if (this.$state === 'REJECTED') {
 onRejected(this.internalValue);
 } else {
 this.chained.push({ onFulfilled, onRejected });
 }
 }
}

let p = new CutePromise(resolve => {
 setTimeout(() => resolve('Hello'), 100);
});
p.then(res => console.log(res));
p = new CutePromise((resolve, reject) => {
 setTimeout(() => reject(new Error('woops')), 100);
});
p.then(() => {}, err => console.log('Async error:', err.stack));
p = new CutePromise(() => { throw new Error('woops'); });
p.then(() => {}, err => console.log('Sync error:', err.stack));