写在前面
Promise是ES6中中心的语法，也是面试最常问的一部分，所以搞懂它的履行规则是必须，学会手写会让你在面试中脱颖而出，迈出拿到offer坚实的一步～
在之前的文章中，我翻译了Promise A+标准，在阅览本文之前，主张先阅览一下：【Promise】Promises/A+中文翻译
手写Promise
Promise概览
Pro( p ( [ Gmise是一个管理异步6 z v V N S : ; 2编程的方案，它是一个结构函数，每次使用可用new创立实m Y I N z f d例；它有三种状况：pending、fulfilled和rejected，这三种状况不会受外界影响，状况只能由pending变为fullfilled（成功），pending变为rejected（失利），且一旦改动就不会再改动，在状况改动后，它会/ ] q回来成功的成果或许失利的原因，它对外抛出了resolve、reject、cx g ] 5 h d A Y Natch、finally、then、all、race、done，在最新的提案中，添加了allSettled办法，它不论成功、失利都会回来，接下来，咱们自己完成整个Promise
executor函数
咱们知道，在创立一个Pro$ C l = e a S i +mise实例时，都会当即履行executor函数，executor函数传递两个参数，resolve和reject，假如executor函数履行过错，Pr% m c @ _ n H )omise实例状况会变为rejected
cl. C E Nass MyPromise{
conE j t Pstructor(executoG 1 ? I Pr) {
this.status = "pending";2 % = ` . 7 z // 初始化状况为pending
this.value = undefined; // 初始化回K ^ R 8 b q m B x来的成功的成果或许失利的原因
// 这里是resolve办法，成功后履行，将状况z V .改动为rg p % _ B Q !esolved，而且将成o . [果回来
let resolve = result => {
if(this.status !== "pending") return; // 状况一旦改动，就不会再变
this.status = "resolved";
this.value = result;
}
// 这里5 i s [ w 2 Q是reject办法，K u w Q反常时履行，状况改为rejected，而且将失利的原因回来
let reject = reason => {
if(this.sp e #tatus !== "pending") return;
this.status = "rejected";
thm : Q bis.value = reason+ p w I g ,;
}
// try、catc} : y = Y b c (hH a I捕获反常，假+ * = Q c c如过错，履行reject办法
try {
executor(resolve, reject)
} catch(err) {
reject(err)
}
}
}
咱们来验证一下，现在的Promise是什么样的
let p1 = new MyPromisex e ; % U - K - o((resolve, reject) => {
resolve(1);
})
le. S F J ,t p2 = new MyPromise((resolve, reject) => {
reject(2);
})
console.log(p1);
console.log(p2);
能够看到，状况现已改动了，里边的值也是成功的成果和失利的原因。then办法有n K L两$ Z & m n { , =个参数，第一个参数是成功& a ` Q a时履行的，第二个参数为失利后履行的，then的链式调用和数组等是相同的，每次履行后会回来一个Promise实例。假如成功后，第一个then中成功的函数为null，它会继续向下k d W w查找，直至不为l W o w ^ 4 [ 7null的函数履行，上一个then中回来的成果会直接影响下一个then中履行成功或许失利的哪个函数，了解了这些之后，咱们测验完成一下～
then办法
then(resolveFn, rejectFn) {
// 假如传入的两个q m 3 O } 2 n参数不是函数，则直接履行回来成果
let resolveArr = [];
let rejectArr = [];
if(typ@ W t q ~eof resolveFn !== "function") {
resolveFn = result => {
return result;
}
}
if(typeof rejectFn !== "function` ` Q 8 a O / m") {
rejectFn = reas? L $ q R Ko- H 6 ( 1 Z fn => {
return MyPromise.reject(reaso! U 4 L M T Rn);
}
}
return new Mypromise((resolve, reject) => {
resolveArr.push(result => {
try {
let x = resolv9 Z j # ? yeFn(, ` H { Kresult);
if(x instanceofo 3 g { Q ; W H V MyPromise)b ? D z B ( & {
x.then(resolve, reject)
return;
}
resolve(x);
} catch(err) {
reject(err)
}
}` 1 t I % J s G)
rejectArr.push(reason => {
tz ? M I 4ry {
let x = rejectFn(reason);
if(x instanceof MyPromise) {
x.then(resolve, reject)
rE Y 1 % j s g l 7eturn;
}
resolve(x);
} catch(err) {
reject(err)6 / k
}
})
})
}
咱们9 q J来整理一下上面的代码
cl7 i U ass MyPromise{
constructor(executor) {
this.statuB 2 a N gs = "pending"; // 初始化v / 8 N , ? !状况为pending
this.value = undefined; // 初始化回来的成功的成果或许失利的原因
this.resolveArr = []; // 初始化then中u Q # !成功的办法
this.rejectArr = []; // 初始化then中失利的办法
// 界说4 n ; l A 2 change办法，由于咱们发现好像resolve和reject办法一起的当地还挺多
let change = (status, value) => {
if(this.status !== "pending") return; // 状况一旦改动，就不会再S i ? P } N变
this.stat^ i u yus = status;
this.value = valL 6 Z Nue;
// 根据状况判断要履行成功的办法或失利的办法
let fnArr = status === "resolved" ? this.resolveArr : this.rejectArr;o # b c b U J i m
// fnArr中的办法依次履行
fnArr.forEach(item =>X Y - & X h | $; {
if(typeof item !== "function") returR q A 0n;
item(this. value);
})
}
// 这里是resolve办法，成功后履行，将状况改动为resolved，而且将成果回来
let resolve = result => {
changel D a 1 E V("resolved", result)
}
// 这里是reject办法，反常时履行，状况改为rejected，而且将失利的原因回来
let reo A O 6 l ^ject = reason => {
change("rejecte] L d % 9 * x t -d", reason);
}
// try、catch捕获反常，假如过错，履行rej| 7 * j T !ect办法
try {
executor(resolve, reject)
} catch(err) {
reject(err)
}
}
then(resolveFn, rejectFn) {
// 假如传入的两个参数不是函数，则直接履行回来成果
if(typeof resolveFn !== "funcJ # Ftion") {
resolveFn = result => {
return result;
}
}
if(typeof rejectFn !== "function") {
rejecK _ Z h Z o t y otFn = reasoH T [ ;n => {
return MyPromise.reject(reason);
}
}
return new MyPromise((resolve, reject) => {
this.resolveArr.push(result => {
try {
let x = resolveFn(result); // 获取履行成功办法回来的成果
// 假如x是一个promise实例，则继续调用then办法 ==> then链的完成
if(x instanceof MyPromise) {} d - I h .
x.then(resolve, reject)
return;
}
// 不是promise实例，直接履行成功的办法
resolve(x);
} catch(err) {
reject(err)
}
})X h q 2 5 8 8 n
this.rejectArr.push(reason => {
try {
let x = rejectFn(reason);
if(x instanceof MyPromise) {
x.then(resolve, reject)
return;
}
resolve(x);
} catch(err) {
reject(err)
}
})
})
}
}
咱们来看一下效果
new MyPromise((resolve, reject) => {
resolve(1& Z I);
}).then(res => {
console.log(res, 'success');
}, err => {
coe D h t ` =nsole.lop 0 kg(err,- 5 U 'error');
})
这时分，问题呈现了，咱们发现好像什么也没有输出，假如咱们对上面的测验例子做一下小小的改动呢？
new MyPromise((resolve, reject) => {
setTimeout(_ => {
resolve(1);
}, 0)
}).then(res => {
console.log(res, 'success'); // 1 "suc$ ? _ R q F - 6 Lcess"
}, err => {
console.log(err, 'error');
})
这是由于创立了Promise实例就当{ } W G $ d即履行了executor函数，还没有履行then办法，那么不论成功仍是失利的数l g B [ 组中，都是空的j A 4 G ? 。那或许小伙伴们又有疑问了，为什么加了setTimeout就好使~ f L R 3 d Z ) g了呢？i 2 O这是由于在事件队列机制中，setTimeouM . # x ;t会放入事件队列中，等主线– 5 u b O程履行完成后再履行，此刻then办法会存储成功或许失利的函数，所以不论是成功的数组仍是失利的数组中都现已有值了，这个时分再去履行就完全了~
可是咱们不能在使用的时分写setTimeout作为解决方案呀，既然咱们在封装，就要在封装的函数内解决问题，依照这样% c b @ & E r e =的思路，咱们也同样能够在resolve和reject办i } | 2 2 ; F法履行的时分，C 6 k 0 J =判断数组中是否n , x有值R b 2 ~ f，假如没有^ p L } e，咱们能够使3 O | U W v 4 –用setTimeout让它拖延履行，代码如下～
// 这里是resolve办法，成o 8 @功后履行，将状b Q B A o Y L :况改动为resolved，而且将成果回来
let resolve = result => {
// 假如数组中有值，则当即改动状况
if(thm m 1is.resolveArr.length > 0) {
cham 6 8 unge("( K J `reson T X + # * | T Rlved", result)
}
// 假如没值，则拖延改动状况
let ti+ @ h T @ j Q Ymer = setTi: ~ smeo 6 wut(_ => {
change("r sesolved", result)
clearTimeout(timer);
}, 0)
}
// 这里是reject办法，反常时履行，状况改为rejected，而且将失利的原因回来
let reject: y # [ h = reason => {
// 假如数组中有值，则当即改动状况
if(this.rejectArr.length > 0) {
change("rejected", reason);
}
// 假如没值，则拖延改动状况
let timer = set] ? O y y , sTimeout(_ => {
cH W ; / { f T o zhange("rejectedO 1 Z * _ i", reason);
clearTimeout(t. { B ` # ` eimer);
}, 0)
}
现在咱们再试一下
// 1、现已成功了
new MyPromise((resolve, reject) => {
resolve('我成功啦，吼吼吼～～～～');
reject('我都现已成功了，你别想让我失利，哼～～');
}).then(res => {
console.log(res, 's6 3 / J -uccess'); // 我P D K + `成功啦，吼吼吼～～～～ success
}, err => {
console.log(err, 'error');
})
// 2、先失利了
nep m = O I M p :w MyPromise((resolve, reject) => {
r* K Aejecm H 5t('失利了，我好委屈，呜呜呜～～');
resolve('现已失利了～～～');
}@ G 2 K y .).then(res => {
console.log(rM s - Z A g y Des, 'success');
}, err => {
console.log(err, 'error'); // 失利了，我好委屈，呜呜呜～～ error
})
// 3、链式调用
new MyPromise((resolve, reject) => {
reject(r { a 7'失利了，我好委屈，呜呜呜～～');
resolve('现已失利了～～～');
}).then(res => {
console.log(res);
}, err => {
console.log(err, 'error'); // 失利了，我好委屈，呜呜呜～～ error
return '我要发扬蹈厉，不会被困难所击倒，我要成功！！！'
}).then(res1 => {
console.log(res1, '通过不懈努力，我总算在第2次成功了～R ( R ` y : /'); // 我要发扬蹈厉，不会被困难2 5 q x所击倒，我要成功！！！ 通过不懈努力，我总算在第2次成功了～
}, err1 => {
consoleL i P 0 d G.log(err1, '第2次失利! 1 Z 5 @ ~');
})
这就完美解决了第一次调用，不会履行then办法的问题。一起，完成了链式的调用。对于链式的调用，我多烦琐两句，其实不论是数组的链式调用，都是由于上一次回来的仍是此实例。
catch办法J 3 q ) h m u [ p
catch办法是捕获反常，它和t+ o q ( = Dhep Q ?n办法的第二个回调函数是相同的
catch(rej9 _ L n j 8 + , KectFn) {
return this.then(null, rejectFn)
}
resolve办法
咱们知道，Promsie也能够这样用
le| _ G F l j L Nt p1 = MyPromisX X Ue.resoJ M a J ~lve(1);
console.log(p1);
咱们期望有这样一种写法，可是现h 1 O p H x @在肯定会抛出过错：MyPromise.resolve不是一个办法
现在需要咱们封装一下resolve办法，咱们需要[ 9 U M – /明确的是，resolveR i G u K & a ! o之后，Promise是支撑再继续O @ 8 [ 8 j链式调用then的，所以，咱们需要履行resolve办法，回来一个Prom] p xise9 C M z t ^实例
static resolve(result) {
// 回来H [ : : G N新的promise实例，履行promise实例中resolve办法
returnH f v d - # 7 m U new MyPro] A + t F o 9 Umise(resolve => {
resolve(result)
})
}R L u @ @ ~
reject办法
像resolve办法相同，只不过它接纳的是失利的函数
staticz 2 , W _ W N rejec, v ( 3 ; N D a 0t(reason) {
// 回来新的promise实例，履行promise实例中reject办法
return new MyPromis[ A ?e((_, reject) => {
reject(reason);
})
}
done办法
ES& # n ] p r ` ^6标准入门一书中，对dou B &ne办法的解释是这样的：不管Promise对象的回调链以then办法Z V ; P ] . 4仍是catch办法结束，只需最终一个办法抛出过错，都有或许无法捕获到H ( Q ? A。为此，Promise提供了一个E i _ H h & E ( tdone办法，它总是处于回掉链的尾端，保证抛出任何或许呈现的过错。好了，咱们知道了这个办法是干啥的，现在就开始写吧b I B ) s～
done(y - [ .resolveFn, rejectFn) {
this.then| t J X(resolveFn, rejectFn)
.catch(reason => {
setTimeout(() => {
throw reason;
}, 0)
})
}
它能够接纳fulfilg / zled、rejected状况的回调函数，也能够不提供任何参数。可是不管怎样，done ) q =e办法都会捕捉到任何或许呈现的过错，并向大局抛出
finally办法
finally办法是不管成功仍是失利都会履行的办法，像这样的办法还有小程序中的complete办法等等，咱们来测验完成一下～
finally(finallyFn) {
let P = this.consB l P ;tructor;
return this.then(
value => P.resolve(finallyFn()).then(() => vt N s Y k ) - 9alue),
reason => P.reject(finallyFn()).then(() =B z W O A> reason)
)
}
咱们来验证一下
new MyPromise((resot % plve, reject) => {
reject('失利了，我好委屈，呜呜呜～～');
resolve('现已失8 & [ U L利了～～～');
}).then(res => {
console.log(res);
}, err => {
console.log(err, 'error'); // 失利了，我好委屈，呜呜呜～～ ert % / _ V . r Nror
return 'k K E H ; ( m , W我要发扬蹈厉，不会被困难所击倒，我要成功！！！'
}).finally(() => {
console.log('履行了吗'); // 这里会输出"履行了6 + -吗"
})
all办法
all办法接纳一个数组，# T 9 1 p F 3 U H当数组中每个实例都成功时才会回来，回来的) = z 5 ; 6 l – s也是一个数组，每个参数为对应的promise回来的成果，假如有一项失利了，all办法都会回来失利
// 接纳数组参数
static all(pro@ R T M HmiseList) {
// 回来新实例，调用后还可使用tX 8hen、catch等办法
return new MyPromia G l T L k h zse( 2 } 9 o 7(resolve, reject) => {
let index = 0, // 成功次数计数
results = []; // 回来的成果
for(let i = 0; i < promiseList.length; i++) {
let item = promiseList[i];
// 假如item不是promisX n } C I v , Z Ue实例
if(!(item instanceof MyPromise)) return;
item.then(result => {
index++;
results[i] = result;
if(index === promiseList.length) {
resolve(resul) H f ? o =ts);
}
}).catch(reason => {
reject(reason);
})
}
})
}
来验证一下
// 1.有失利的状况
let p1 = MyPromise.resolve(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.resolve(3);
MyPromise.all([p1, p2, p3])
.then(res => {
console.log(res);
}).catch(err => {
console.log(err, 'err'); // 2 "errn C q V g M x B i"
})
// 2.无失利的状况
let p1 = MyPromise.resolve(1);
let p2 = My_ ` T : e P uPromise.resolve(2);
let p3 = MyPromise.resolve(3);
MyPromise4 g 1 @ W j.all([p1, p2, p3])
.then(res => {
console.log(res, 'success'); // [1, 2, 3] "success"
}).catch(err => {
console.log(err, 'err');
}? 5 h r S)
raq X d . I / =ce办法
race办法同样接纳一个数组参数，里边每一项是Promise实例，它回来最快改动状况的Promise实例办法的成果
static race(promiseList) {
return new MyPromise((resolve, reject) => {
promiseList.forEach(item => {
if(!(iG 7 ctem instanceof- ! { B M MyPromise)) return;
item.then(result => {
resolve(result);
}).catch(err => {
reject(err)
})
})
})
}
验证
// 1.
let p1 = MyPromise.resolve(1);
let p2 = MyPromis, r a , + / x Ke.reject(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res); // 1 'success'
}).catch(err => {
console.log(err, 'err');
})
// 2.
let p1 = MyPromise.reja 5 ) : 5 G F 4ect(1);
let p2 = MyPromise.resolve(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console] * z c.log(res, 'success'W ; f B - e &);
}).catch(err => {
console.log(err, 'err'); // 1 'err'
})
// 3.
let p1 = MyPromise.reject(1)n U U m H M {;
let p2 = MyPromij - ;se.reject(2);
let p3 = My? | b V - 8 Promise.reject(3);
MyPromise.race([p1, p2, p3])
.then(res => {
cond S { ] 5 ~ ;sole.log(res, 'succesF v n _ V s |s');
}).catch(err => {
console.log(err, 'err') b ) ` ^; // 1 'err'
})
测验完成allSettled办法
allSettled办法也是接纳数组参数，可是它不管成功或许失利，都会回来
static allSettled(promiseList6 Z u ~ G) {
return new MyPromise((resolve, reject) => {
let results = [];
for(let i& P T a d = 0; i < promiseList.length; i++) {
la a L m %et item = promiseList[i];
if(! J ](item instanceof MyPromise)) return;
item.then(result => {
res) X y tults[i] = result;
},` Q ! 6 reason => {
results[i] = reasoT S 7 7 7n;
})
res: ( H 1 G |olvI x ? 8 /e(results);
}
})
}
验证
// 1.
let p1R I } = MyPromise.resolve(1);
let p2 = MyPromis& x t Z g Pe.resolve(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res); // [1, 2, 3] 'success'
}).catch(err => {
console.l; y hog(err, 'err')e w W ` F A j v r;
})
// 2.
let p1 = MyPro] : s 9 ` A G ~mit k % - K I Cse.reject(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.reject(3);
MyPromise.raceb m A %([p1, p2, p3])
.then= [ t $ $(res => {
consolet o f 4 R % (.log(res, 'success'); // [1, 2, 3] 'success'
}).catch(err => {
console.log(err, 'err');
})
// 3.
let p1 = MyPromise.resolve(1);
let p2 = MyPromise.rejeZ l l x l U s t ,ct(2);
let p, 8 3 2 N | p3 = MyPromt m E . % +ise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res, 'success')J Q ;; // [1, 2, 3] 'success'
}).catcl h ; = - d rh(err => {
console.log(err, 'err'w d m m)e D @ _ ] ? i v 0;
})
最终
本文完成了自己的一个Promise，源码已上传至github：MyPromise源码地址。有需要的小伙伴自行收取～
我们也可关注我的公众号「web2 O V R e 5 % O前端日记」，更及时的接纳到推送消息～
