自定义实现JavaScript中的Promise
目录
- 浏览器兼容性
- 自定义Promise实现
- 参考
Promise是JavaScript ES6规范中的一个重要对象，可以方便地实现各种异步操作。
浏览器兼容性
以下是各种浏览器对Promise的支持情况:
对于不支持Promise的浏览器我们可以自定义Promise实现，将其作为原生Promise的Polyfill。
自定义Promise实现
以下是自定义实现的Promise:
/**
* 自定义实现Promise
* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
*
* 核心:
* promise的resolve()或reject()执行，表示status状态变化，并将结果作为入参触发watcher的onFullfill()或onReject()方法
*
* 逻辑:
* 1. promise的状态是外部通过调用executor中的resolve()和reject()方法实现的
* 2. 当调用resolve()的时候，promise的状态从pending变成fullfilled，并执行通过.then()监听fullfilled状态的回调，且resovle()传入的结果会作为onFullfill()回调的入参
* 3. 当调用reject()的时候，promise的状态从pending变成rejected，并执行通过.then()监听rejected状态的回调，且reject()传入的错误会作为onReject()回调的入参
*
* case分析:
* p1.then(p1OnFullfilled, p1OnReject) => p2
* 1. p1OnFullfilled执行
* 1.1 该方法的返回值是Promise，该Promise是一个新的Promise p3，不是p2，当这个新的Promise执行resovle()时，其resolve()传入的结果会作为p2的onFullfill()的回调入参
* 1.2 该方法的返回值不是Promise，该值作为入参触发p2._resolve()执行
* 2. p1OnReject执行
* 2.1 该方法内部通过throw抛出异常，该异常作为入参触发执行p2._reject()执行
* 2.2 该方法内部没有抛出异常，则执行p2的onFullfill()回调，且返回值会作为p2的onFullfill()的回调参数
*
* @param executor function，Required，其签名格式为function(resolve, reject)。
* executor是带有 resolve 和 reject 两个参数的函数。
* Promise构造函数执行时立即调用executor 函数，resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回所建promise实例对象前被调用）。
* resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。
* executor 内部通常会执行一些异步操作，一旦异步操作执行完毕(可能成功/失败)，要么调用resolve函数来将promise状态改成fulfilled，要么调用reject 函数将promise的状态改为rejected。
* 如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。
*/
function MyPromise(executor) {
this._status = 0; // 0表示pending，1表示fullfilled，-1表示rejected
this._result = undefined; // resolve()执行的入参
this._err = null; // reject()执行的入参
// watcher是通过then来观察结果的Promise，由于可以通过多次调用p1.then()来得到多个新的Promise，所以此处是watcher数组
this._watchers = [];
/**
* 封装传递给executor()的resolve()方法
* 逻辑:
* 1. 更改当前promise的status，并记录result
* 2. 通知watchers结果
*
* @parma result Any，Optional，Promise的resovle的结果值
*/
this._resolve = (result) => {
// Promise已经resolved或rejected，不能再次resolve
if (this._status !== 0) {
return;
}
this._status = 1;
this._result = result;
for (const watcher of this._watchers) {
this._notifyWatcher(watcher);
}
};
/**
* 封装传递给executor()的reject()方法
* 逻辑:
* 1. 更改当前promise的status，并记录error
* 2. 通知watchers错误
*
* @param err Any，Optional，Promise的reject的原因
*/
this._reject = (err) => {
// Promise已经resolved或rejected，不能再次reject
if (this._status !== 0) {
return;
}
this._status = -1;
this._err = err;
for (const watcher of this._watchers) {
this._notifyWatcher(watcher);
}
};
try {
executor.call(this, this._resolve, this._reject);
} catch (e) {
this._reject(e);
}
}
/**
* 内部私有方法，用于向当前promise中添加一个watcher以监听当点promise的resolve()或reject()的结果
*
* @param watcher MyPromise，Required，监听当前promise的resolve()或reject()结果的观察者Promise对象
*/
MyPromise.prototype._addWatcher = function(watcher) {
if (this._watchers.indexOf(watcher) < 0) {
this._watchers.push(watcher);
}
if (this._status !== 0) {
// 已经resolved或rejected
this._notifyWatcher(watcher);
}
};
/**
* 内部私有方法，用于将当前promise的resolve()或reject()的结果通知观察者
*
* @param watcher MyPromise，Required，监听当前promise的resolve()或reject()结果的观察者Promise对象
*/
MyPromise.prototype._notifyWatcher = function(watcher) {
if (this._watchers.includes(watcher)) {
if (this._status > 0) {
// 已经fullfilled
setTimeout(() => {
this._removeWatcher(watcher);
watcher._onPrentResolve(this._result);
}, 0);
} else if (this._status < 0) {
// 已经rejected
setTimeout(() => {
this._removeWatcher(watcher);
watcher._onParentReject(this._err);
}, 0);
}
}
};
/**
* 内部私有方法，用于将监听当前promise的resolve()或reject()的观察者从观察者列表中删除
*
* @param watcher MyPromise，Required，监听当前promise的resolve()或reject()结果的观察者Promise对象
*/
MyPromise.prototype._removeWatcher = function(watcher) {
const index = this._watchers.indexOf(watcher);
if (index >= 0) {
this._watchers.splice(index, 1);
}
};
/**
* 功能:
* then() 方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。
* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
*
* 逻辑:
* promise1.then()方法需要返回一个新的Promise对象promise2
*
* @param onPromise1Resolve function，Optional，当 Promise 变成接受状态（fulfilled）时调用的函数。
* 该函数有一个参数，即接受的最终结果（the fulfillment value）。
* 如果该参数不是函数，则会在内部被替换为 (x) => x，即原样返回 promise 最终结果的函数。
*
* @param onPromise1Reject function，Optional，当 Promise 变成拒绝状态（rejected）时调用的函数。
* 该函数有一个参数，即拒绝的原因（rejection reason）。
* 如果该参数不是函数，则会在内部被替换为一个 "Thrower" 函数 (it throws an error it received as argument)。
*
* @return MyPromise，返回新的Promise对象，具体的返回值依据以下规则返回。如果 then 中的回调函数：
* 返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
* 没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。
* 抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
* 返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
* 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
* 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。
*/
MyPromise.prototype.then = function(onPromise1Resolve, onPromise1Reject) {
const promise1 = this;
const promise2 = new MyPromise(function(resolve, reject) {
// 此处的this执行新的Promise p
this._onPrentResolve = function(promise1Result) {
let value = undefined;
// 如果未设置onPromise1Resolve，则直接将promise2进行resolve(promise1Result)
if (!onPromise1Resolve) {
resolve(promise1Result);
return;
}
try {
// 执行promise1的resovle之后的回调方法onPromise1Resolve()
value = onPromise1Resolve(promise1Result);
} catch (e) {
// 如果onPromise1Resolve()方法执行异常，则将对promise2执行reject()
reject(e);
return;
}
if (value instanceof MyPromise) {
// 返回了一个新的Promise对象promise3
const promise3 = value;
// promise2需要等待新的Promise执行完成才能resolve或reject
// 首先覆写promise2._onPrentResolve和promise2._onParentReject方法以便接受promise3执行resolve、reject时的数据
this._onPrentResolve = function(promise3Result) {
resolve(promise3Result);
};
this._onParentReject = function(promise3Err) {
reject(promise3Err);
};
// 使得promise2观察promise3的状态
promise3._addWatcher(this); // this是promise2
} else {
resolve(value);
}
};
this._onParentReject = function(promise1Err) {
let value = undefined;
// 如果未设置onPromise1Reject，则直接将promise2进行reject(promise1Err)
if (!onPromise1Reject) {
reject(promise1Err);
return;
}
try {
// 执行promise1的reject之后的回调方法onPromise1Reject()
value = onPromise1Reject(promise1Err);
} catch(e) {
// 如果onPromise1Reject()方法执行异常，则将对promise2执行reject()
reject(e);
return;
}
if (value instanceof MyPromise) {
// 返回了一个新的Promise对象promise3
const promise3 = value;
// promise2需要等待新的Promise执行完成才能resolve或reject
// 首先覆写promise2._onPrentResolve和promise2._onParentReject方法以便接受promise3执行resolve、reject时的数据
this._onPrentResolve = function(promise3Result) {
resolve(promise3Result);
};
this._onParentReject = function(promise3Err) {
reject(promise3Err);
};
// 使得promise2观察promise3的状态
promise3._addWatcher(this); // this是promise2
} else {
resolve(value);
}
};
// 使得promise2观察promise1的状态
promise1._addWatcher(this); // this是promise2
});
return promise2;
};
/**
* 功能:
* catch() 方法返回一个Promise，并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected) 相同。
* (事实上, obj.catch(onRejected) 内部实现就是调用 obj.then(undefined, onRejected))
* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
*
* 逻辑:
* 1. 对于p1.then(onResolve, onReject)，onResolve中出现异常时，onReject不会捕获
* 2. 对于p1.then(onResolve).catch(onCatch)，onResolve中出现异常时，onCatch会捕获
* 3. 对于p1.then(onResolve, onReject).catch(onCatch)，onResolve中出现异常时，onReject不会捕获，onCatch会捕获
* 4. 对于p1.then(onResolve, onReject).catch(onCatch)，onReject中出现异常时，onCatch会捕获
*
* @return MyPromise，返回新的Promise对象
*/
MyPromise.prototype.catch = function(onCatch) {
return this.then(null, onCatch);
};
/**
* 功能:
* finally() 方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。
* 这为在Promise是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在then()和catch()中各写一次的情况。
* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally
*
* 逻辑:
* finally() 虽然与 .then(onFinally, onFinally) 类似，它们不同的是：
* 调用内联函数时，不需要多次声明该函数或为该函数创建一个变量保存它。
* 由于无法知道promise的最终状态，所以finally的回调函数中不接收任何参数，它仅用于无论最终结果如何都要执行的情况。
* 与Promise.resolve(2).then(() => {}, () => {}) （resolved的结果为undefined）不同，Promise.resolve(2).finally(() => {}) resolved的结果为 2。
* 同样，Promise.reject(3).then(() => {}, () => {}) (resolved 的结果为undefined), Promise.reject(3).finally(() => {}) rejected 的结果为 3。
*
* @return MyPromise，返回新的Promise对象
*/
MyPromise.prototype.finally = function(onFinally) {
const onParentResolve = function(result) {
// 忽略onFinally()的执行结果
onFinally();
// 将之前promise的结果透传
return result;
};
const onParentReject = function(err) {
// 忽略onFinally()的执行结果
onFinally();
// 将之前promise的错误透传
throw err;
};
return this.then(onParentResolve, onParentReject);
};
/**
* 功能:
* Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。
* 如果这个值是一个 promise，那么将返回这个promise；
* 如果这个值是thenable（即带有"then" 方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态；
* 否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。
* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve
*
* @param value Any，Optional，将被Promise对象解析的参数，也可以是一个Promise对象，或者是一个thenable。
*
* @return MyPromise，返回一个带着给定值解析过的Promise对象，如果参数本身就是一个Promise对象，则直接返回这个Promise对象。
*/
MyPromise.resolve = function(value) {
if (value instanceof MyPromise) {
return value;
} else {
return new MyPromise(function(resolve) {
resolve(value);
});
}
};
/**
* Promise.reject()方法返回一个带有拒绝原因的Promise对象。
* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject
*
* @param reason Any，Optional，表示Promise被拒绝的原因。
*
* @retrun MyPromise，返回一个给定原因了的被拒绝的Promise。
*/
MyPromise.reject = function(reason) {
return new MyPromise(function(resolve, reject) {
reject(reason);
});
};
/**
* Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；
* 如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。
* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
*
* @param iterable Iterable，Required，一个可迭代对象，如Array。
*
* @return MyPromise，返回一个Promise对象。
* 如果传入的参数是一个空的可迭代对象，则返回一个已完成（already resolved）状态的 Promise。
* 如果传入的参数不包含任何 promise，则返回一个异步完成（asynchronously resolved） Promise。注意：Google Chrome 58 在这种情况下返回一个已完成（already resolved）状态的 Promise。
* 其它情况下返回一个处理中（pending）的Promise。这个返回的 promise 之后会在所有的 promise 都完成或有一个 promise 失败时异步地变为完成或失败。 返回值将会按照参数内的 promise 顺序排列，而不是由调用 promise 的完成顺序决定。
*/
MyPromise.all = function(iterable) {
return new MyPromise(function(resolve, reject) {
const that = this;
if (iterable.length === 0) {
// 如果传入的参数是一个空的可迭代对象，则返回一个已完成（already resolved）状态的 Promise。
resolve([]);
} else {
const promises = iterable.map(item => {
if (item instanceof MyPromise) {
return item;
} else {
// 将非MyPromise实例的值封装成resolved的Promise
return MyPromise.resolve(item);
}
});
const allCount = promises.length;
const resultsObj = {}; // {index: value}
function handleResolve(index, result) {
// 如果promise已经resolved或rejected，则不再继续后续逻辑
if (that._status !== 0) {
return;
}
resultsObj[index] = result;
const keys = Object.keys(resultsObj);
if (keys.length === allCount) {
// 所有promises都已经处理完成
const results = [];
keys.forEach(key => {
const value = resultsObj[key];
const index = parseInt(key);
results[index] = value;
});
resolve(results);
}
}
function handleReject(err) {
// 如果promise已经resolved或rejected，则不再继续后续逻辑
if (that._status !== 0) {
return;
}
reject(err);
}
promises.forEach((promise, index) => {
promise.then(function(result) {
handleResolve(index, result);
}, function(err) {
handleReject(err);
});
});
}
});
};
/**
* Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。
* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
*
* 逻辑:
* race 函数返回一个 Promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是两个中的哪个。
* 如果迭代iterable是空的，则返回的 promise 将永远等待。
* 如果迭代iterable中包含非Promise值、已经resolved的Promise对象、已经rejected的Promise对象， 则 Promise.race() 将解析为迭代iterable中找到的第一个值。
*
* @param iterable Iterable，Required，一个可迭代对象，如Array。
*
* @return MyPromise，返回一个Promise对象。只要给定的迭代iterable中的一个promise解决或拒绝，就采用第一个promise的值作为它的值，从而异步地解析或拒绝（一旦堆栈为空）。
*
*/
MyPromise.race = function(iterable) {
return new MyPromise(function(resolve, reject) {
// 如果迭代iterable是空的，则返回的 promise 将永远等待。
if (iterable.length === 0) {
return;
}
iterable.map(item => {
if (item instanceof MyPromise) {
item.then((result) => {
if (this._status === 0) {
resolve(result);
}
}, (err) => {
if (this._status === 0) {
reject(err)
}
});
} else {
if (this._status === 0) {
resolve(item);
}
}
});
});
};
通过以下方式将其作为Promise Polyfill使用:
<script type="text/javascript" src="promise-polyfill.js"></script>
<script type="text/javascript">
if (!window.Promise) {
window.Promise = MyPromise;
}
</script>
参考
MDN - 使用 Promise
MDN - Promise