手把手教你实现一个Promise

11次阅读

共计 7026 个字符，预计需要花费 18 分钟才能阅读完成。

1、constructor
首先我们都知道 Promise 有三个状态，为了方便我们把它定义成常量
const PENDING = ‘pending’;
const FULFILLED = ‘fulfilled’;
const REJECTED = ‘rejected’;
接下来我们来定义一个类
class MyPromise {
constructor(executor) {
// 控制状态，使用了一次之后，接下来的都不被使用
this.state = PENDING;
this.value = null;
this.reason = null;

// 定义 resolve 函数
const resolve = value => {
if (this.state === PENDING) {
this.value = value;
this.state = FULFILLED;
}
}

// 定义 reject 函数
const reject = value => {
if (this.state === PENDING) {
this.reason = value;
this.state = REJECTED;
}
}

// executor 方法可能会抛出异常，需要捕获
try {
// 将 resolve 和 reject 函数给使用者
executor(resolve, reject);
} catch (error) {
// 如果在函数中抛出异常则将它注入 reject 中
reject(error);
}
}
}
到这基本比较好理解我简单说明一下

executor：这是实例 Promise 对象时在构造器中传入的参数，一般是一个 function(resolve,reject){}

state：`Promise 的状态，一开始是默认的 pendding 状态，每当调用道 resolve 和 reject 方法时，就会改变其值，在后面的 then` 方法中会用到

value：resolve 回调成功后，调用 resolve 方法里面的参数值

reason：reject 回调成功后，调用 reject 方法里面的参数值

resolve：声明 resolve 方法在构造器内，通过传入的 executor 方法传入其中，用以给使用者回调

reject：声明 reject 方法在构造器内，通过传入的 executor 方法传入其中，用以给使用者回调

2、then
then 就是将 Promise 中的 resolve 或者 reject 的结果拿到，那么我们就能知道这里的 then 方法需要两个参数，成功回调和失败回调，上代码！
then(onFulfilled, onRejected) {
if (this.state === FULFILLED) {
onFulfilled(this.value)
}
if (this.state === REJECTED) {
onRejected(this.reason)
}
}
我们来简单的运行一下测试代码
const mp = new MyPromise((resolve, reject)=> {
resolve(‘******* i love you *******’);
})
mp.then((suc)=> {
console.log(11111, suc);
}, (err)=> {
console.log(‘****** 你不爱我了 *******’, err)
})

// 11111 ‘******* i love you *******’
这样看着好像没有问题，那么我们来试试异步函数呢？
const mp = new MyPromise((resolve, reject)=> {
setTimeout(()=> {
resolve(‘******* i love you *******’);
}, 0)
})
mp.then((suc)=> {
console.log(11111, suc);
}, (err)=> {
console.log(‘****** 你不爱我了 *******’, err)
})
我们会发现什么也没有打印，哪里出问题了呢？原来是由于异步的原因，当我们执行到 then 的时候 this. state 的值还没发生改变，所以 then 里面的判断就失效了。那么我们该怎么解决呢？
这就要说回经典得 callback 了。来上源码
// 存放成功回调的函数
this.onFulfilledCallbacks = [];
// 存放失败回调的函数
this.onRejectedCallbacks = [];

const resolve = value => {
if (this.state === PENDING) {
this.value = value;
this.state = FULFILLED;
this.onFulfilledCallbacks.map(fn => fn());
}
}

链式调用
当我们不传参数时应当什么运行

这二个的思路也都很简单，链式调用也就是说我们再返回一个 promise 的实例就好了。而不传参则就是默认值的问题了。下面来看源码
then(onFulfilled, onRejected) {
let self = this;
let promise2 = null;
// 解决 onFulfilled,onRejected 没有传值的问题
onFulfilled = typeof onFulfilled === ‘function’ ? onFulfilled : y => y
// 因为错误的值要让后面访问到，所以这里也要跑出个错误，不然会在之后 then 的 resolve 中捕获
onRejected = typeof onRejected === ‘function’ ? onRejected : err => {
throw err;
}

promise2 = new MyPromise((resolve, reject) => {
if (self.state === PENDING) {
console.log(‘then PENDING’)
self.onFulfilledCallbacks.push(() => {
setTimeout(() => {
try {
let x = onFulfilled(self.value);
console.log(333333, x, typeof x);
self.resolvePromise(promise2, x, resolve, reject);
} catch (reason) {
reject(reason);
}
}, 0)

});
self.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onRejected(self.reason);
self.resolvePromise(promise2, x, resolve, reject);
} catch (reason) {
reject(reason);
}
}, 0);
});
}

if (self.state === FULFILLED) {
console.log(‘then FULFILLED’)
setTimeout(() => {
try {
let x = onFulfilled(self.value);
self.resolvePromise(promise2, x, resolve, reject);
} catch (reason) {
reject(reason);
}
}, 0);
}

if (self.state === REJECTED) {
console.log(‘then REJECTED’)
setTimeout(() => {
try {
let x = onRejected(self.reason);
self.resolvePromise(promise2, x, resolve, reject);
} catch (reason) {
reject(reason);
}
})
}
});

return promise2;
}
为什么外面要包一层 setTimeout？：因为 Promise 本身是一个异步方法，属于微任务一列，必须得在执行栈执行完了在去取他的值，所以所有的返回值都得包一层异步 setTimeout。
resolvePromise 是什么？：这其实是官方 Promise/A+ 的需求。因为你的 then 可以返回任何职，当然包括 Promise 对象，而如果是 Promise 对象，我们就需要将他拆解，直到它不是一个 Promise 对象，取其中的值。
3、resolvePromise
我们直接看代码
resolvePromise(promise2, x, resolve, reject) {
let self = this;
let called = false; // called 防止多次调用
// 因为 promise2 是上一个 promise.then 后的返回结果，所以如果相同，会导致下面的.then 会是同一个 promise2，一直都是，没有尽头
// 相当于 promise.then 之后 return 了自己，因为 then 会等待 return 后的 promise，导致自己等待自己，一直处于等待
if (promise2 === x) {
return reject(new TypeError(‘ 循环引用 ’));
}
// 如果 x 不是 null，是对象或者方法
if (x !== null && (Object.prototype.toString.call(x) === ‘[object Object]’ || Object.prototype.toString.call(x) === ‘[object Function]’)) {
// x 是对象或者函数
try {
let then = x.then;

if (typeof then === ‘function’) {
then.call(x, (y) => {
// 别人的 Promise 的 then 方法可能设置了 getter 等，使用 called 防止多次调用 then 方法
if (called) return;
called = true;
// 成功值 y 有可能还是 promise 或者是具有 then 方法等，再次 resolvePromise，直到成功值为基本类型或者非 thenable
self.resolvePromise(promise2, y, resolve, reject);
}, (reason) => {
if (called) return;
called = true;
reject(reason);
});
} else {
if (called) return;
called = true;
resolve(x);
}
} catch (reason) {
if (called) return;
called = true;
reject(reason);
}
} else {
// x 是普通值，直接 resolve
resolve(x);
}
}

为什么要在一开始判断 promise2 和 x？：首先在 Promise/A+ 中写了需要判断这两者如果相等，需要抛出异常，我就来解释一下为什么，如果这两者相等，我们可以看下下面的例子，第一次 p2 是 p1.then 出来的结果是个 Promise 对象，这个 Promise 对象在被创建的时候调用了 resolvePromise(promise2,x,resolve,reject) 函数，又因为 x 等于其本身，是个 Promise，就需要 then 方法递归它，直到他不是 Promise 对象，但是 x（p2）的结果还在等待，他却想执行自己的 then 方法，就会导致等待。
为什么要递归去调用 resolvePromise 函数？：相信细心的人已经发现了，我这里使用了递归调用法，首先这是 Promise/A+ 中要求的，其次是业务场景的需求，当我们碰到那种 Promise 的 resolve 里的 Promise 的 resolve 里又包了一个 Promise 的话，就需要递归取值，直到 x 不是 Promise 对象。

4、catch
//catch 方法
catch(onRejected){
return this.then(null,onRejected)
}
5、finally
finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。
finally(fn) {
return this.then(value => {
fn();
return value;
}, reason => {
fn();
throw reason;
});
};
6、resolve/reject
大家一定都看到过 Promise.resolve()、Promise.reject() 这两种用法，它们的作用其实就是返回一个 Promise 对象，我们来实现一下。
static resolve(val) {
return new MyPromise((resolve, reject) => {
resolve(val)
})
}
//reject 方法
static reject(val) {
return new MyPromise((resolve, reject) => {
reject(val)
})
}
7、all
all 方法可以说是 Promise 中很常用的方法了，它的作用就是将一个数组的 Promise 对象放在其中，当全部 resolve 的时候就会执行 then 方法，当有一个 reject 的时候就会执行 catch，并且他们的结果也是按着数组中的顺序来排放的，那么我们来实现一下。
static all(promiseArr) {
return new MyPromise((resolve, reject) => {
let result = [];

promiseArr.forEach((promise, index) => {
promise.then((value) => {
result[index] = value;

if (result.length === promiseArr.length) {
resolve(result);
}
}, reject);
});
});
}
8、race
race 方法虽然不常用，但是在 Promise 方法中也是一个能用得上的方法，它的作用是将一个 Promise 数组放入 race 中，哪个先执行完，race 就直接执行完，并从 then 中取值。我们来实现一下吧。
static race(promiseArr) {
return new MyPromise((resolve, reject) => {
promiseArr.forEach(promise => {
promise.then((value) => {
resolve(value);
}, reject);
});
});
}
9、deferred
static deferred() {
let dfd = {};
dfd.promies = new MyPromise((resolve, reject) => {
dfd.resolve = resolve;
dfd.rfeject = reject;
});
return dfd;
};
什么作用呢？看下面代码你就知道了

let fs = require(‘fs’)
let MyPromise = require(‘./MyPromise’)
//Promise 上的语法糖，为了防止嵌套，方便调用
// 坏处错误处理不方便
function read(){
let defer = MyPromise.defer()
fs.readFile(‘./1.txt’,’utf8′,(err,data)=>{
if(err)defer.reject(err)
defer.resolve(data)
})
return defer.Promise
}

10、测试
const mp1 = MyPromise.resolve(1);
const mp2 = MyPromise.resolve(2);
const mp3 = MyPromise.resolve(3);
const mp4 = MyPromise.reject(4);

MyPromise.all([mp1, mp2, mp3]).then(x => {
console.log(x);
}, (err) => {
console.log(‘err1’, err);
})
MyPromise.race([mp1, mp4, mp2, mp3]).then(x => {
console.log(x);
}, (err) => {
console.log(‘err2’, err);
})