~
Promise 篇
本文皆在实现Promise的所有方法,代码均测试可运行,编写于2019年11月17日
GitHub
仓库更有自己实现的webpack、mini-react、redux、react-redux、websocket , Electron
跨平台桌面端、React-native
移动端开源项目等
仓库地址:
https://github.com/JinJieTan
回顾Promise
:
new Promise
中的构造器函数同步执行
then
的回调函数以微任务的形式执行
调用resolve,reject
后,状态不能再被改变,传递的值也是
每次.then
后返回的还是一个promise
promise
可以嵌套
其余后面会谈到
正式开始:
乞丐版:
编写逻辑:
1.Promise
被 new
调用
2.每次失败或者成功需要指定回调函数,并且可以传递值
3.Promise
拥有.then
方法
上面代码有个问题,状态改变应该是异步的,.then应该是微任务形式执行
异步改变状态并且支持三种状态版本:
编写思路
状态只能由Pending
改变,而且只能改变一次
异步改变状态,异步的执行.then
支持链式调用
写到这里,需要暂停,捋一捋思路。
万事开头难,其实编写一个Promise
是非常简单的事情,看懂上面这两段代码,然后彻底搞清楚这三点,再往下看。
Promise
的构造器函数是同步执行
resolve、reject
的调用是同步调用,异步执行.例如resolve()
是同步调用了resolve
这个函数,但是resolve
函数内部的代码是异步的。---即异步改变状态,异步执行.then
new Promise((resolve,reject)=>{
console.log('这里是同步执行')
resolve(‘resolve函数内部是异步执行’)
}).then(()=>{
console.log('这里等resolve函数内部异步执行,状态改变以后再执行')
})
彻底搞懂上面的这个例子和两句话,然后你就可以往下看了,其实下面也都是一些重复或者细节处理的工作
支持.then
的链式调用
想支持链式操作,其实很简单,首先存储回调时要改为使用数组
self.onFulfilledCallbacks = [];
self.onRejectedCallbacks = []
当然执行回调时,也要改成遍历回调数组执行回调函数
最后,then
方法也要改一下,只需要在最后一行加一个return this
即可,这其实和jQuery
链式操作的原理一致,每次调用完方法都返回自身实例,后面的方法也是实例的方法,所以可以继续执行。
编写思路
1.将所有的成功与失败回调函数存在数组中,遍历执行
2.为了支持链式调用,返回this
实例对象即可
3.每次改变状态,清空所有的队列回调
4.目前这种方式只支持同步的回调,下面会加入支持异步
异步链式调用,好像是这里最难的点,但是在应用层里的难点,加一个中间层就能解决,实在不行加两个 ---来自国内不知名码农
看下面这段Node.js
代码:
上面场景,我们读取完1.txt
后并打印1.txt
内容,再去读取2.txt
并打印2.txt
内容,再去读取3.txt
并打印3.txt
内容,而读取文件都是异步操作,所以都是返回一个promise
。
我们上一节实现的promise
可以实现执行完异步操作后执行后续回调,但是本节的回调读取文件内容操作并不是同步的,而是异步的,所以当读取完1.txt
后,执行它回调onFulfilledCallbacks
里面的f1,f2,f3
时,异步操作还没有完成,所以我们本想得到这样的输出:
this is 1.txt
this is 2.txt
this is 3.txt
但是实际上却会输出
this is 1.txt
this is 1.txt
this is 1.txt
上面遇到的问题,有点像一个面试题,考闭包的一个循环。看打印输出几,大家应该有印象。
支持异步链式调用
每次.then
返回一个新的promise
,这个新的promise
拥有它独自对应的成功和失败回调(相当于中间层)
同样每次状态改变就清空当前promise
对应的回调队列
修改.then
方法
.then
在链式调用中会被执行多次,这里是本文的重点
思路解析:
首先判断当前Promise
的状态,如果状态没有改变,那就全部添加到队列中
调用resolve
函数,同样清空队列中所有的任务,不同点在于bridgePromise
这个用来桥接的Promise
(看成中间层),下面给出例子详解
MyPromise.prototype.then = function(onFulfilled, onRejected) {
const self = this;
let bridgePromise;
//防止使用者不传成功或失败回调函数,所以成功失败回调都给了默认回调函数
onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;
onRejected = typeof onRejected === "function" ? onRejected : error => { throw error };
if (self.status === FULFILLED) {
return bridgePromise = new MyPromise((resolve, reject) => {
setTimeout(() => {
try {
let x = onFulfilled(self.value);
resolvePromise(bridgePromise, x, resolve, reject);
} catch (e) {
reject(e);
}
});
})
}
if (self.status === REJECTED) {
return bridgePromise = new MyPromise((resolve, reject) => {
setTimeout(() => {
try {
let x = onRejected(self.error);
resolvePromise(bridgePromise, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
}
if (self.status === PENDING) {
return bridgePromise = new MyPromise((resolve, reject) => {
self.onFulfilledCallbacks.push((value) => {
try {
let x = onFulfilled(value);
resolvePromise(bridgePromise, x, resolve, reject);
} catch (e) {
reject(e);
}
});
self.onRejectedCallbacks.push((error) => {
try {
let x = onRejected(error);
resolvePromise(bridgePromise, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
}
}
这个例子,里面有异步的代码,但是Promise
可以做到有序执行
我们看bridgePromise
的源码:
代码很简单 就是递归调用,直到返回的不是一个Promise
,那么调用resolve
清空队列,并且把返回的值存储在self
属性上,提供给下一个任务使用。
下面就是流程图:
这里一定要看清楚,本文的重点基本都在这里。
符合Promise A+
规范,修改resolvePromise
函数即可
function resolvePromise(bridgepromise, x, resolve, reject) {
//2.3.1规范,避免循环引用
if (bridgepromise === x) {
return reject(new TypeError('Circular reference'));
}
let called = false;
//这个判断分支其实已经可以删除,用下面那个分支代替,因为promise也是一个thenable对象
if (x instanceof MyPromise) {
if (x.status === PENDING) {
x.then(y => {
resolvePromise(bridgepromise, y, resolve, reject);
}, error => {
reject(error);
});
} else {
x.then(resolve, reject);
}
// 2.3.3规范,如果 x 为对象或者函数
} else if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {
try {
// 是否是thenable对象(具有then方法的对象/函数)
//2.3.3.1 将 then 赋为 x.then
let then = x.then;
if (typeof then === 'function') {
//2.3.3.3 如果 then 是一个函数,以x为this调用then函数,且第一个参数是resolvePromise,第二个参数是rejectPromise
then.call(x, y => {
if (called) return;
called = true;
resolvePromise(bridgepromise, y, resolve, reject);
}, error => {
if (called) return;
called = true;
reject(error);
})
} else {
//2.3.3.4 如果 then不是一个函数,则 以x为值fulfill promise。
resolve(x);
}
} catch (e) {
//2.3.3.2 如果在取x.then值时抛出了异常,则以这个异常做为原因将promise拒绝。
if (called) return;
called = true;
reject(e);
}
} else {
resolve(x);
}
}
实现es6 promise的all,race,resolve,reject
方法
all
方法:
race
方法
resolve,reject
方法~ 快速定义一个成功或者失败状态的Promise
实现promisify
方法~
实现catch
方法~其实就是不传第一个参数.then
方法的语法糖
到这里,一个Promise
并且符合A+规范的所有方法就实现了,网上的实现方式有很多都不一样,本文以一个比较简单明了的方式去实现了它。希望能帮助到大家更清楚的了解Promise
后面会针对下面的内容出专题系列文章~ 欢迎关注本公众号:前端巅峰
1.从零手写一个React
2.从零编写一个webpack
3.从零实现一个websocket
4.从零实现一个vue
5.优雅的让react和vue一起开发
本公众号注重关注技术方向
即时通讯
Electron跨平台桌面端、React-native移动端、Taro小程序
Node.js全栈工程师方向、分布式微服务
原生JavaScript
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。