前端开发系列131-进阶篇之Promise源码实现
本文介绍参考[PromiseA+]规范来实现一个符合规范的Promise库。
上面是ES6+实现的Promise核心方法，其整体结构也可以通过下面的打印查看
/* 01-打印Promise类的内容(静态方法) */
console.dir(Promise)
/* 打印输出(已经省略部分内容) */
// length: 1 期望形参数量((resolve,reject)=>{})
// name: "Promise" 类(构造函数)的名字
// prototype: Promise 原型对象
// then: ƒ then() then处理函数
// catch: ƒ catch() catch处理函数
// finally: ƒ finally() 完成的处理函数
// constructor: ƒ Promise() 原型的构造器属性
// race: ƒ race() 异步任务并发先执行完
// reject: ƒ reject() 包装为reject
// resolve: ƒ resolve() 包装为resolve
// all: ƒ all() 异步任务并发都执行完
// allSettled: ƒ allSettled()
// Symbol(Symbol.species): (...)
// Symbol(Symbol.toStringTag): "Promise"
Promises/A+ 规范约定的Promise的实现逻辑和核心代码。
/* 核心注解 */
/* 1、Promise应该被设计为一个类(构造函数) */
/* 2、Promise存在三种状态，分别是pending(等待)、rejected(失败) 和 resolved(成功)。*/
/* 3、Promise类(构造函数)接收一个“拥有两个函数参数的函数”作为参数，我们可以称之为执行器函数(executor)立即执行。*/
/* 4、Promise类(构造函数)内部应该以私有函数的方式来是实现reject和resolve函数。 */
/* 5、Promise内部考虑到异步任务的执行(譬如定时器)Promise状态无法立即完成等待->成功|失败的切换，使用注册/订阅模式*/
/* 6、Promise的then方法处理失败、成功、等待态(如果存在异步任务)的Promise后续任务。 */
/* 7、Promise的then方法应该实现链式调用，实现的策略是总是返回一个新的Promise对象 */
const PENDING = "PENDING";
const RESOLVED = "RESOLVED";
const REJECTED = "REJECTED";
function resolvePromise(promise, x, resolve, reject) {
/* 1、死循环处理 */
if (promise === x) {
reject(new TypeError("# Chaining cycle detected for promise #<Promise>"))
}
let called = false;
/* 2、区分返回值是基本值和(Promise)的情况*/
if ((typeof x === "object" && x != null) || typeof x === "function") {
try {
let then = x.then;
if (typeof then === "function") {
then.call(x, y => {
if (called) return;
called = true;
resolvePromise(promise, y, resolve, reject); /* 递归调用 */
}, r => {
if (called) return;
called = true;
reject(r);
})
} else {
resolve(x);
}
} catch (e) {
if (called) return;
called = true;
reject(e);
}
} else {
resolve(x);
}
}
class Promise {
constructor(executor) {
this.status = PENDING;
this.value = this.reason = undefined;
this.rejectedCallBacks = [];
this.resolvedCallBacks = [];
/* reject 和 resolve 应该被实现为私有函数 */
let resolve = (val) => {
if (val instanceof Promise) {
return val.then(resolve, reject);
}
if (this.status === PENDING) {
this.status = RESOLVED;
this.value = val;
this.resolvedCallBacks.forEach(fn => fn());
}
}
let reject = (val) => {
if (this.status === PENDING) {
this.status = REJECTED;
this.reason = val;
this.rejectedCallBacks.forEach(fn => fn());
}
}
/* 执行器函数应该立即执行，并进行异常处理 */
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
then(onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === "function" ? onFulfilled : v => v;
onRejected = typeof onRejected === "function" ? onRejected : e => { throw e }
let promise = new Promise((resolve, reject) => {
if (this.status === RESOLVED) {
setTimeout(() => {
try {
let x = onFulfilled(this.value);
resolvePromise(promise, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
}
if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
}
if (this.status === PENDING) {
this.rejectedCallBacks.push(() => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
})
this.resolvedCallBacks.push(() => {
setTimeout(() => {
try {
let x = onFulfilled(this.value);
resolvePromise(promise, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
})
}
})
return promise;
}
}
/* 基准测试 */
Promise.defer = Promise.deferred = function() {
let dfd = {};
dfd.promise = new Promise((resolve, reject) => {
dfd.resolve = resolve;
dfd.reject = reject;
})
return dfd;
}
module.exports = Promise;
规范基准测试
npm install promises-aplus-tests g
cd dist
promises-aplus-tests Promise.js
Promise还有一些诸如catch和resolve等方法，下面简单给出它们的实现代码。
class Promise{
/* .... */
catch (errCallBack) {
return this.then(null, errCallBack); /* 为了支持链式调用，此处需要return */
}
static resolve(data) {
return new Promise((resolve, reject) => {
resolve(data)
})
}
static reject(err) {
return new Promise((resolve, reject) => {
reject(err);
})
}
finally(callBack) {
return this.then((value) => {
return Promise.resolve(callBack()).then(() => value);
}, reason => {
return Promise.resolve(callBack()).then(() => { throw reason });
})
}
}
