手写Promise，手把手过程
网上不少手写Promise。根据本身的理解，也写了一份，晒出来但愿能被你们指正。也给本身一个梳理的过程。初学者要辩证的看这个文档，你须要对原生Promise很熟悉。html
代码其实很是简单，不到100行代码，主要是充分了解原生Promise都能作什么，有什么特征。在根据这些功能特征列出模拟Promise的需求，问题就解决了一大半了。这里会一步步的列出原生Promise的功能特征。再一步步的添加代码。每一步代码都是在上一步的代码基础上添加或修改得来的，在代码中会标识出哪里作了修改和增长，这样就不用翻来翻去看上一步的代码了，保证思路连贯性面试
说明一下，这里研究原生的Promise只看表象，不深刻分析。文中代码的运行和测试都是在chrome【版本 81.0.4044.129（正式版本） （64 位）】中进行chrome
文中代码虽然已经都测试过了，可是不能保证在复制粘贴过程当中没错。因此最好理解以后本身敲一遍promise
还有更重要的是：这里用setTimeout来模拟微任务，会和原生的Promise在程序中执行顺序有所不一样。这点必定要了解。 关于事件循环写了 一个简述文章，有兴趣的能够看一下:简述JavaScript事件循环EventLoopbash
正文看起来有点长，其实都是重复的代码占的位置，内容很简单异步
1、Promise是个容器
首先是模拟Promise须要实现的最基本的需求函数
-
promise这个容器，用来存储异步或同步执行的结果。oop
-
还要有状态，来反映同步或者异步处理的阶段。有三种状态post
- pending 异步或同步的执行阶段，这个时候结果值为undefined
- fulfilled，一般表示同步或者异步成功返回告终果的状态，这时候结果值记录返回的正确结果
- rejected，一般表示同步或者异步出现错误时的状态，这个时候结果值记录错误的缘由
-
在Promise对象外部不能直接访问到Promise的状态和值测试
-
还须要有个执行同步或异步的函数（执行函数），以Promise参数的形式，在Promise构造函数中执行
上代码：
/*'↓↓↓定义了MyPromise函数，参数executor（执行函数），数据类型是Funciotn,用来执行同步或异步操做↓↓↓'*/
/*'↓↓↓之因此用函数不用class，是为了方便定义对象私有变量和私有方法↓↓↓'*/
function MyPromise(executor){
/*'↓↓↓定义了三个状态PENDING、FULFILLED、REJECTED↓↓↓'*/
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
/*'↓↓↓value变量存储异步结果（Promise的值），pending状态下是undefined，fulfilled状态下是执行结果，rejected状态下是错误缘由↓↓↓'*/
let value;
/*'↓↓↓state变量用来存储Promise状态，初始状态是pending↓↓↓'*/
let state = PENDING;
/*'↓↓↓都定义好了，再运行执行函数↓↓↓'*/
executor()
}
复制代码
最基本的部分完成
2、内部操做状态和值
上面定义了容器中的状态和须要存储值的变量，并且运行了用户本身定义的执行方法，可是当执行函数有告终果，怎么改变容器的状态和存储结果呢？这就须要定义操做状态和值方法来处理。需求以下
- 值和状态只能改变一次
- 操做状态和值的方法不向外暴露，内部经过resolve方法把状态改为fulfilled，经过reject方法把状态改变成rejected，并改变状态对应的值。这两个方法做为参数传给执行函数executor，由用户决定何时经过这两个方法改变状态和值。
继续完善MyPromise ↓↓↓↓↓
function MyPromise(executor){
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
let value;
let state = PENDING;
/*'↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓这里是新加的改变状态和值的方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓'*/
function change(newState, newValue){ //'用来修改状态和相应的值的方法'
if (state === PENDING) {//'限制了只能在状态pending下改变，这样就保证状态和值只能改一次'
value = newState;
state = newValue;
}
}
let resolve = change.bind(this, FULFILLED);// '定义了resolve函数，只能把状态改为fulfilled'
let reject = change.bind(this, REJECTED);// '定义了reject函数，只能把状态改为fulfilled'
//'resolve和reject都是change的偏函数，其实绑定this没啥意义，就是写着方便，修改方便，只关注change就好了，也便于阅读代码'
/*'↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑这里是新加的改变状态和值的方法↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑'*/
executor(resolve, reject)// ←←←'经过executor参数，传递到Promise外部使用'
}
复制代码
3、须要注册回调函数
能存储状态和值了，也能修改状态和值了，可是还须要在相应状态下处理值的方法的呢，因此就须要注册回调函数了。
Promise对象中有两个方法then和catch注册回调函数
- then有两个参数，第一个参数用来注册状态变为fulfilled时候处理返回值的回调，而且当状态改变以后，随时注册均可以处理那个已经固定了的返回值，第二个参数用来注册状态变为rejected时候处理错误缘由的回调，而且当状态改变以后，随时注册均可以处理那个已经固定了的错误缘由
- catch方法注册的回调等同于then的第二个函数的做用同样，其实catch就是then的语法糖，至关于then(undefined，function)
- catch和then都返回一个新的Promise
- 一个Promise对象能够注册不少个回调，也就是new了一个Promise能够分别点上不少then或者catch，这里说的不是链式调用呦，是分别分别分别调用then或者catch。仍是举个例子吧
let p = new Promise((resolve, reject) => {})
p.then(value => {})
p.then(value => {})
p.catch(value => {})
/*'↑↑↑↑↑↑上面的代码说的是分别注册不少回调↑↑↑↑↑↑↑'*/
/*'各个回调是独立的，返回的新Promise也不是同一个，这至关于Promise状态传递出现了分支，这个后面再展开'*/
/*'↓↓↓↓↓↓下面是链式调用，这里说的不是这种状况↓↓↓↓↓↓↓↓↓↓↓↓↓'*/
p.then(value => {}).then(value => {}).then(value => {}).then(value => {})
复制代码
根据上面的需求先吧这两个用来注册回调的方法加上
function MyPromise(executor){
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
let value;
let state = PENDING;
function change(newState, newValue){
if (state === PENDING) {
value = newState;
state = newValue;
}
}
let resolve = change.bind(this, FULFILLED);
let reject = change.bind(this, REJECTED);
/*'↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓这里是注册回调的方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓'*/
var onQueue = []; //'→→→→→为了能注册多个回调，定义了onQueue，存储注册的回调，等待状态改变后调用'
function register(onFulfilled, onRejected) {//'→→→→→用来注册回调的方法'
let nextPromise = new MyPromise((nextResolve, nextReject) => {
/*'↓↓↓↓↓↓↓↓↓向onQueue中添加注册的方法，用这种对象结构保存是为了以后调用方便↓↓↓↓↓↓↓↓↓'*/
/*'↓↓↓↓↓↓↓↓↓至于为何在Promise里写，后面会的内容会详细提到↓↓↓↓↓↓↓↓↓'*/
onQueue.push({
[FULFILLED]: { on: onFulfilled},
[REJECTED]: { on: onRejected},
});
})
return nextPromise;
}
this.then = register.bind(this); //'→→→→→定义了Promise对象的then方法，注册处理返回值的回调方法'
this.catch = register.bind(this, undefined);//'→→→→→定义了Promise对象的catch方法，是then的语法糖'
/*'↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑这里是注册回调的方法↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑'*/
executor(resolve, reject)
}
复制代码
4、须要一个机制，来处理注册的回调。
当状态不是pending的时候，就须要执行注册的回调，那么就须要有一个处理回调的机制。这里添加一个run方法处理这个功能
在加功能以前仍是定需求，看看原生Promise都干了些什么
首先须要说明一下：这里说的执行注册的回调函数，并非说直接执行，要遵循js的event loop事件循环机制。原生的Promise是把回调放入微任务等待，等这次宏任务执行完毕，再执行当前微任务
这里咱们用setTimeout这个宏任务来模拟微任务
再看看何时开始处理回调：
- 当状态从pending变为fulfilled或rejected的时候，就须要处理注册的回调
- 当状态不是pending的时候，注册回调以后就须要立刻处理
不要着急，还有别的，看看链式调用都发生了什么，上例子：
new Promise((resolve, reject) => {
// resolve('p ok')
reject('p err')
}).then(value => {
console.log("成功1 "+value)
return "p1"
}, error => {
console.log("失败1 "+error)//←←←←←←输出这里
return "p1 err"
}).catch(err => {
console.log("失败2 "+error)
return "p2 err"
}).then(value => {
console.log("成功3 "+value)//←←←←←←输出这里
return new Promise((resolve, reject) => {
reject("新的Promise失败了")
})
}, error => {
console.log("失败3 "+error)
return "p3 err"
}).then(value => {
console.log("成功4 "+value)
}, error => {
console.log("失败4 "+error)//←←←←←←输出这里
})
//输出:
//失败1 p err
//test.html:56 成功3 p1 err
//test.html:66 失败4 新的Promise失败了
复制代码
整了一个好长的链，简单说明一下状况，为了说的清楚，用一个图来解释一下：
- then方法返回的Promise状态和值和用它注册的回调函数返回值有关。
- 当回调函数返回值为非Promise对象的时候，then返回的Promise对象的状态是fulfilled，值为回调函数的返回值
- 当回调函数返回值为Promise对象的时候，then返回的Promise对象状态和值，继承回调函数返回的Promise对象的状态和值。
- 当前环节（当前then或者catch），没有相应状态的回调函数的时候，状态和值会向下传递。
根据上述原生Promise特征，继续增长MyPromise功能，加一个run方法用来实现处理注册的回调函数的机制
function MyPromise(executor){
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
let value;
let state = PENDING;
function change(newState, newValue){
if (state === PENDING) {
value = newState;
state = newValue;
run()//'→→→→→这里执行run方法。在状态改变的时候尝试处理一下回调函数 } } let resolve = change.bind(this, FULFILLED); let reject = change.bind(this, REJECTED); /*'↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓这里处理注册的回调函数↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓'*/ function run(){ if (state === PENDING) { return; } while (onQueue.length) { let onObj = onQueue.shift();//'←←←从注册的回调中拿出一份，放入下面模拟的微任务中' setTimeout(() => { //'←←←用setTimeout模拟微任务，把回调放入，等待执行' if (onObj[state].on) { //'←←←判断当前状态下，是否注册了回调函数' let returnvalue = onObj[state].on(value);//'←←←有就运行回调函数，获得返回值' if (returnvalue instanceof MyPromise) { //'←←←判断返回值是否是MyPromise类型' /*'↓↓↓返回值是MyPromise类型，用这个MyPromise对象的then方法，能获得返回MyPromise对象的状态和值
↓↓↓再利用nextPromise的resolve和reject方法做为参数获得状态和值，这样就实现了继承状态和值'*/ returnvalue.then(onObj[FULFILLED].next, onObj[REJECTED].next); } else { //'↓↓↓返回值不是MyPromise类型，直接改变nextPromise状态为fulfilled，值为回调函数的返回值' onObj[FULFILLED].next(returnvalue); } } else { /*'↓↓↓当前状态没有注册回调函数，
↓↓↓则利用保存的nextPromise对象的resolve或reject，改变nextPromise对象的状态
↓↓↓这就至关于传递了状态和值'*/ onObj[state].next(value); } }, 0); } } /*'↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑这里处理注册的回调函数↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑'*/ var onQueue = []; function register(onFulfilled, onRejected) { let nextPromise = new MyPromise((nextResolve, nextReject) => { onQueue.push({ /*"↓↓↓这里添加了next属性，为何呢 ↓↓↓上面的需求中提到了，状态和值会有向下传递的状况，还会有继承回调函数返回Promise对象状态和值的状况 ↓↓↓要想改变下一个Promise对象（nextPromise）状态，只能经过它的resolve和reject方法 ↓↓↓因此这里就把这俩方法提保存起来以便传递和继承状态使用↓↓↓↓"*/ [FULFILLED]: { on: onFulfilled, next: nextResolve}, [REJECTED]: { on: onRejected, next: nextReject},//'←←←之因此分开存，就是由于在方便向下传递状态' }); }) run() //'→→→→→这里执行run方法。用来处理注册的回调函数，run方法里有判断，为pending状态不处理回调函数' return nextPromise; } this.then = register.bind(this); this.catch = register.bind(this, undefined); executor(resolve, reject) } 复制代码
5、 报错处理
仍是先上几个例子，看看原生Promise特色，总结一下需求。
- Promise错误是不向外抛出的
先来一个小实验
new Promise(() => {
xxx;// 用一个未定义的变量抛错
})// 控制台输出了错误
console.log('我是后面的代码')// '可是也输出了这句，没有被阻塞，说明没有抛出到Promise外面'
复制代码
上面的例子错误输出了，后面的代码也执行了。错误只是简单的输出，说明没有抛出到Promise外面。 可是若是Promise的参数是否是function类型，会发生什么
new Promise("hahaha") //Uncaught TypeError: Promise resolver hahaha is not a function
console.log('我是后面的代码')//'这里没有输出输出了'
复制代码
上面例子错误输出了，后面的代码没有输出。说明错误抛出来了，因此：
- Promise参数不是function类型，会向外抛出错误
再来个例子，看看Promise是怎么处理各个部分报错的。
new Promise((resolve, reject) => {
xxx;
// resolve("ok")
// reject('no')
// xxx;
}).then(value => {
//xxx;
console.log(value)//输出位置0
},err => {
//xxx;
console.log("err1",err)//输出位置1
}).catch(err => {
console.log("err2",err)//输出位置2
})
当Prosmise的执行函数有错，输出位置1输出：err1 ReferenceError: xxx is not defined
当then第一个参数有错误，输出位置2输出：err1 ReferenceError: xxx is not defined
当then第二个参数有错误，输出位置2输出：err2 ReferenceError: xxx is not defined
这个例子把then的第二个参数去掉
当Prosmise的执行函数和then第一个参数有错，都在输出位置2输出：err2 ReferenceError: xxx is not defined
复制代码
你们能够再变换一些方式测试错误处理的方式。根据以上例子能够总结
- Promise对象执行函数报错，会把状态改为rejected,调用自身注册的onrejected函数。
- 若是在Promise对象状态改变以后报错，则不会获得处理，更不会抛到对象外
- 若是自身没有注册onrejected函数，错误逐级向下传递的。直到最后。也就是说，错误会在离它最近的onrejected函数获得处理。 这与rejected状态传递方式同样。
function MyPromise(executor){
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
let value;
let state = PENDING;
function change(newState, newValue){
if (state === PENDING) {
value = newState;
state = newValue;
run()
}
}
let resolve = change.bind(this, FULFILLED);
let reject = change.bind(this, REJECTED);
function run(){
if (state === PENDING) {
return;
}
while (onQueue.length) {
let onObj = onQueue.shift();
setTimeout(() => {
if (onObj[state].on) {
try{//'在加了回调函数运行时抓取错误'
let returnvalue = onObj[state].on(value);
if (returnvalue instanceof MyPromise) {
returnvalue.then(onObj[FULFILLED].next, onObj[REJECTED].next);
} else {
onObj[FULFILLED].next(returnvalue);
}
}catch(error){
onObj[REJECTED].next(error);//'←←←若是回调函数报错则，以rejected的状态向下传递'
}
} else {
onObj[state].next(value);
}
}, 0);
}
}
var onQueue = [];
function register(onFulfilled, onRejected) {
let nextPromise = new MyPromise((nextResolve, nextReject) => {
onQueue.push({
[FULFILLED]: { on: onFulfilled, next: nextResolve},
[REJECTED]: { on: onRejected, next: nextReject},
});
})
run()
return nextPromise;
}
this.then = register.bind(this);
this.catch = register.bind(this, undefined);
//'↓↓↓加了判断，若是executor不是函数类型，就向外抛错'
if (!(executor instanceof Function)) {
throw new TypeError(executor + " 不是个函数。亲！MyPromise参数得是个函数的呢");
}
//'↓↓↓这里又加了try为执行函数运行时抓取错误'
//'↓↓↓可是有个问题就是若是executor不是函数，光加个try就不会向外抛出错误了，因此在这前边再加个判断'
try {
executor(resolve, reject);
} catch (error) {
/*'↓↓↓若是执行函数报错，改变自身状态为rejected。 ↓↓↓若是在状态改变以后报错，也会执行这里，可是前面已经限制了状态只能改变一次。 ↓↓↓在这里调用reject方法就没有用了。达到了状态改变以后报错不处理的效果。'*/
reject(error);
}
}
复制代码
写到这里promise最基本的功能就实现了。可是有那么一点点特征尚未，是锦上添花的功能，是啥呢。上例子
new Promise((resolve, reject) => {
// xxx;
resolve("ok")
// reject('no')
})
//resolve时，控制台没输出
//reject时，控制台输出：Uncaught (in promise) no。意思就是错误没有处理
//在状态改变以前的错误，报错输出在控制台，可是也只是输出而已不是抛出错误。由于不会阻塞代码
复制代码
上面例子说明报错和rejected状态没有被处理，虽然不会抛出，也不会影响程序。可是会在控制台有红字提示。因此最后把这个提示功能加上,下面的代码调整了一下顺秩序，看着更顺眼点，再添加提示的功能
function MyPromise(executor){
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
let value;
let state = PENDING;
let tipTask;//'为了能移除提示任务用的'
function change(newState, newValue){
if (state === PENDING) {
value = newState;
state = newValue;
if (!onQueue.length && state === REJECTED) {
/* '当状态为rejected，并且没有注册回调函数，则在任务中放入一个提示任务。 若是在MyPromise运行的这个宏任务中注册了回调，则在run中提示任务被移除 直到最后，确定会有没有注册回调函数的MyPromise对象。这个对象就会执行这个提示任务了 例如一个链式调用p.then().then()....then()不可能无穷的，总会有最后一个。 这最后一个返回的promise就不会被注册回调。因此这里添加的提示任务就会被执行了 ' */
tipTask = setTimeout(() => {//'为了能移除这个任务。把变量放在MyPromise函数做用域下'
console.error("在MyPromise里，须要注册一个处理错误的回调 \n" + (value || ''));
}, 0);
}
run()
}
}
function run(){
if (state === PENDING) {
return;
}
while (onQueue.length) {
clearTimeout(tipTask);//'若是注册了回调。这里把change方法里加的提示任务移除掉'
let onObj = onQueue.shift();
setTimeout(() => {
if (onObj[state].on) {
try{
let returnvalue = onObj[state].on(value);
if (returnvalue instanceof MyPromise) {
returnvalue.then(onObj[FULFILLED].next, onObj[REJECTED].next);
} else {
onObj[FULFILLED].next(returnvalue);
}
}catch(error){
onObj[REJECTED].next(error);
}
} else {
onObj[state].next(value);
}
}, 0);
}
}
var onQueue = [];
function register(onFulfilled, onRejected) {
let nextPromise = new MyPromise((nextResolve, nextReject) => {
onQueue.push({
[FULFILLED]: { on: onFulfilled, next: nextResolve},
[REJECTED]: { on: onRejected, next: nextReject},
});
})
run()
return nextPromise;
}
let resolve = change.bind(this, FULFILLED);
let reject = change.bind(this, REJECTED);
this.then = register.bind(this);
this.catch = register.bind(this, undefined);
if (!(executor instanceof Function)) {
throw new TypeError(executor + " 不是个函数。亲！MyPromise参数得是个函数的呢");
}
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
复制代码
好了这就获得一个相对完美的模拟Promise的手写代码了。
其实Uncaught (in promise) no或者内部报错没处理在控制台输出，实际上在chrome中是在全部当前存在的宏任务队列任务（不是全部，是当前，也就是在运行这个Promise的宏任务运行时，所存在的宏任务）都执行完毕以后再输出（我的怀疑这个提示用的是否是setTimeout0呀哈哈哈）。
这里用setTimeout模拟的微任务，在js事件循环（event loop）循序上会和原生Promise有区别。
本文但愿能给你们帮助，也但愿能获得指点。文中使用的词语都是相对口语化的，若是您在正式场合使用，好比面试中，请使用更高大上的专业用语。谢谢
相关文章
- 1. Promise-手写Promise
- 2. 手写Promise A+
- 3. 手写 Promise
- 4. 手写promise
- 5. Promise手写
- 6. 手写 ES6 promise
- 7. JavaScript手写Promise
- 8. 手写Promise
- 9. 【原】手写一个promise 手把手教你实现一个完整的 Promise
- 10. 【手写Promise】史上最最最详细的手写Promise教程
- 更多相关文章...
- • XQuery 参考手册 - XQuery 教程
- • RSS 参考手册 - RSS 教程
- • 再有人问你分布式事务，把这篇扔给他
- • Java 8 Stream 教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字节跳动21届秋招运营两轮面试经验分享
- 2. Java 3 年，25K 多吗？
- 3. mysql安装部署
- 4. web前端开发中父链和子链方式实现通信
- 5. 3.1.6 spark体系之分布式计算-scala编程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在线
- 8. 在线画图
- 9. devtools热部署
- 10. 编译和链接
欢迎关注本站公众号,获取更多信息
相关文章