~
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 方法的语法糖
来源: https://segmentfault.com/a/1190000021040201