实现自己的Promise polyfill
功能清单：
- Promise.prototype.then()
- Promise.prototype.catch()
- Promise.reject()
- Promise.resolve()
- Promise.all()
- Promise.race()
- Promise.prototype.finally()
具体实现
function Promise(fn) {
var _this = this;
var callback = null;
this._value = null; // 存放resolve（解决）的结果
this._reason = null; // 存放reject（拒绝）的原因
this._onResolveds = []; // 存放resolve前调用then时传入的函数onResolved(可能多次调用then，所以是数组)
this._onRejecteds = []; // 存放reject前调用catch时传入的函数onRejected(可能多次调用catch，所以是数组)
this._status = "pending";
function resolve(val) {
if (_this._status !== 'pending') { // 若status已经改变为"resolved"或"rejected"，回调直接在then内处理
return
}
_this._value = val;
_this._status = "resolved";
while (callback = _this._onResolveds.shift()) { // 按注册顺序依次执行回调
callback(val)
}
}
function reject(reason) {
if (_this._status !== 'pending') {
return
}
_this._reason = reason;
_this._status = "rejected";
while (callback = _this._onRejecteds.shift()) {
callback(reason)
}
}
try {
fn(resolve, reject)
} catch (err) {
reject(err)
}
}
then (重点)
Promise.prototype.then = function (onResolved, onRejected) {
// 规范：如果 onFulfilled 不是函数，其必须被忽略
// 这里，若onResolved, onRejected 不是函数，则用一个过渡性的函数代替
onResolved = typeof onResolved === 'function'? onResolved:function(value) {
return value; // 将value原封不动地传给下一个then，相当于跳过（忽略）本轮then的onResolved
}
onRejected = typeof onRejected === 'function'? onRejected:function(err) {
throw err; // 同上，相当于跳过（忽略）本轮then的onRejected
}
var _this = this
var promise2 // then始终返回一个Promise实例，用于链式调用。
if (_this._status === "resolved") {
promise2 = new Promise(function (resolve, reject){
setTimeout(function() { // 确保onResolved 和 onRejected 方法异步执行。下面的setTimeout同理
try {
var x = onResolved(_this._value)
resolvePromise(promise2, x, resolve, reject) // resolvePromise内执行promise2的resolve和reject
} catch (e) {
reject(e)
}
}, 0);
})
}
if (_this._status === "rejected") {
promise2 = new Promise(function (resolve, reject){
setTimeout(function() {
try {
var x = onRejected(_this._reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0);
})
}
if (_this._status === "pending") {
// resolve或reject前调用then的话，将回调推入队列
promise2 = new Promise(function (resolve, reject) {
_this._onResolveds.push(function () {
setTimeout(function() {
try {
var x = onResolved(_this._value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0);
});
_this._onRejecteds.push(function () {
setTimeout(function() {
try {
var x = onRejected(_this._reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0);
});
})
}
return promise2
};
根据onResolved/onRejected的返回值 x 的不同情况，调用promise2的resolve和reject
function resolvePromise (promise2, x, resolve, reject) {
if(promise2 === x) { // 防止引用同一个promise,导致死循环
return reject(new TypeError('循环引用'));
}
var called = false // 防止多次调用
if (x!== null && (typeof x ==='object' ||typeof x === 'function')) {
try {
let then = x.then;
if (typeof then === 'function') {
// x 是一个定义了 then 方法的对象或函数，即thenable
then.call(x, function(y) { // 这里规范是这样说明的：这步我们先是存储了一个指向 x.then 的引用，然后测试并调用该引用，以避免多次访问 x.then 属性。这种预防措施确保了该属性的一致性，因为其值可能在检索调用时被改变。
if (called) return // 确保resolve和reject，只执行其中一个
called = true;
resolvePromise(promise2, y, resolve, reject) // 如果x是thenable，则继续调用resolvePromise，直到 onResolved/onRejected 的返回值不是 thenable
}, function(err) {
if (called) return
called = true;
reject(err);
})
} else {
resolve(x) // 如果 x 不属于 thenable， 则把x作为返回值.
}
} catch (e) {
if (called) return
called = true;
reject(e)
}
} else { //普通值
resolve(x)
}
}
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected)
}
Promise.resolve = function (value) {
return new Promise(function (resolve, reject) {
resolve(value)
})
}
Promise.reject = function (reason) {
return new Promise(function (resolve, reject) {
reject(reason)
})
}
Promise.all = function (promises) {
if (!Array.isArray(promises)) {
throw new TypeError('必须传入promise数组');
}
var length = promises.length
var values = []
return new Promise(function (resolve, reject) {
function rejectHandle(reason) {
reject(reason) // 只要其中一个reject，整体reject
}
function resolveHandle(index) {
return function (value) {
values[index] = value // 按传入时的顺序记录每个promise的结果值
if (--length === 0) { // 所有子promise都resolve后，整体resolve
resolve(values)
}
}
}
promises.forEach(function (item, index) {
item.then(resolveHandle(index), rejectHandle)
})
})
}
Promise.race = function (promises) {
if (!Array.isArray(promises)) {
throw new TypeError('必须传入promise数组');
}
return new Promise(function (resolve, reject) {
function rejectHandle(reason) {
reject(reason)
}
function resolveHandle(value) {
resolve(value)
}
promises.forEach(function (item) {
item.then(resolveHandle, rejectHandle)
})
})
}
// 不管resolved还是rejected，都会执行，避免同样的语句需要在then()和catch()中各写一次的情况。
Promise.prototype.finally = function (callback) {
return this.then(callback, callback)
}
测试：
使用promises-aplus-tests：全局安装npm i promises-aplus-tests -g，然后命令行 promises-aplus-tests [js文件名] 进行测试
注意：测试前要在尾部加上下面的代码：
Promise.deferred = Promise.defer = function () {
let deferred = {};
deferred.promise = new Promise(function (resolve, reject) {
deferred.resolve = resolve;
deferred.reject = reject;
});
return deferred
};
module.exports = Promise
测试完成后可删除
使用 UMD 规范封装：
(function (global, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(factory)
} else if (typeof exports === 'object' && typeof module !== 'undefined') {
// CommonJS (如node)
module.exports = factory()
} else {
// 浏览器全局变量
global.promisePolyfill = factory()
}
})(this, function () {
'use strict';
/*
定义Promise的代码
*/
function promisePolyfill () {
var global = null
try {
global = Function('return this')();
} catch (e) {
throw new Error('全局对象不可用');
}
global.Promise = Promise
}
return promisePolyfill
})
使用
promisePolyfill() // 注册Promise全局变量
