学习自阮一峰老师 ECMAScript 6 入门 Promise介绍
参考 promise-实现
Promise属于微任务,而模拟的 Promise 都是使用setTimeout,属于宏任务。所以在某些情况下会有bug,需要注意,如:
setTimeout('console.log(1)')
new Promise(resolve=>{
console.log(2)
resolve()
}).then(_=>{
console.log(3)
})
正确的结果应该是 2 3 1,但是模拟的 Promise 返回 1 2 3。
bluebird,es6-promise等也有这个问题。
代码实现
// 三种状态 + 1
var PENDING = "pending";
var RESOLVED = "resolved";
var REJECTED = "rejected";
var FINALLY = "finally";
var Promise = window.Promise || function(){
var Promise = function(fn){
var that = this;
that.currentState = PENDING;
that.value = undefined;
// 用于保存 then 中的回调,只有当 promise
// 状态为 pending 时才会缓存,并且每个实例至多缓存一个
that.Callbacks = []
//这个函数是封装的resolve,reject的公共方法,这个方法不执行,则then、catch、finally中的回调不执行
var stateF = function(state, value){
setTimeout(function(){ // 异步执行,保证执行顺序
if (that.currentState === PENDING) {
that.value = value;
var cb;
//回调状态,默认为Promise状态
//通过修改回调状态,来确定运行哪个回调
//如没有抛出错误,则不运行 REJECTED 回调;抛出错误,则catch之前的 RESOLVED 回调不运行
var cbState = that.currentState = state;
while(cb = that.Callbacks.shift()){
//状态为 RESOLVED,运行then回调;状态为 REJECTED,运行catch回调
if(cb.state == cbState || cb.state == FINALLY){
try{
if(cb.state == FINALLY){
//状态为 finally 的回调不接受参数,不返回参数
cb.fn()
}else{
//运行正确,回调状态变为 RESOLVED
cbState = RESOLVED
//该回调的返回值是下一个 then 回调的参数
that.value = cb.fn(that.value)
}
}catch(err){
//运行错误,回调状态变为 REJECTED
cbState = REJECTED
//该错误是下一个 catch 回调的参数
that.value = err
}
}
}
}
})
}
var resolve = function(value){
if (value instanceof Promise) {
// 如果 value 是个 Promise,递归执行
//等 Promise 状态返回后,重新运行 resolve 或 reject
return value.then(resolve, reject)
}
stateF(RESOLVED, value)
}
var reject = function (reason) {
stateF(REJECTED, reason)
}
// new Promise(() => throw Error('error))
try {
fn(resolve, reject);
} catch (e) {
reject(e);
}
}
/*
Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
上面代码中,Promise.all方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。
只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
Promise.all方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
* */
Promise.all = function(arr){
arr = Array.prototype.slice.apply(arr)
var values = [], count = 0;
var p = new Promise(function(resolve, reject){
arr.forEach(function(item, index){
Promise.resolve(item).then(function(value){
values[ index ] = value;
count++
if(p.currentState === PENDING && count === arr.length){
resolve(values)
}
}).catch(function(e){
p.currentState === PENDING && reject(e)
})
})
})
return p
}
/*
Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.race([p1, p2, p3]);
只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
* */
Promise.race = function(arr){
arr = Array.prototype.slice.apply(arr)
var p = new Promise(function(resolve, reject){
arr.forEach(function(item, index){
Promise.resolve(item).then(function(value){
p.currentState === PENDING && resolve(value)
}).catch(function(e){
p.currentState === PENDING && reject(e)
})
})
})
return p
}
/*
将现有对象转为 Promise 对象
如果参数是 Promise 实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
参数是一个具有then方法的对象,Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法。
如果参数是一个原始值,或者是一个不具有then方法的对象,则Promise.resolve方法返回一个新的 Promise 对象,状态为resolved。
Promise.resolve方法允许调用时不带参数,直接返回一个resolved状态的 Promise 对象。
* */
Promise.resolve = function(value){
if (value instanceof Promise) {
return value
}
var fn = value.toString() === "[object Object]" && typeof value.then === 'function'
? value.then
: function(resolve){ resolve(value) };
return new Promise(fn)
}
/*
Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。
Promise.reject()方法的参数,会原封不动地作为reject的参数,变成后续方法的参数。这一点与Promise.resolve方法不一致
* */
Promise.reject = function(value){
return new Promise(function(resolve, reject){ reject(value) })
}
//提取的公共方法,then,catch,finally共用
function bindF(state, fn){
if(typeof fn === 'function'){
if(this.currentState === PENDING){
this.Callbacks.push({
state: state,
fn: fn
})
}else{
//状态改变后,不是REJECTED,直接运行
state !== REJECTED && fn(this.value)
}
}
return this
}
/*
then方法的作用是为 Promise 实例添加状态改变时的回调函数。
then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。
* */
Promise.prototype.then = function(resolve, reject){
var rs, rj;
var p = new Promise(function(_resolve, _reject){
rs = function(value){
_resolve( typeof resolve === 'function' ? resolve(value) : value )
}
rj = function(value){
_reject( typeof reject === 'function' ? reject(value) : value )
}
})
bindF.call(this, RESOLVED, rs)
bindF.call(this, REJECTED, rj)
return p
}
/*
Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名
用于指定发生错误时的回调函数。
* */
Promise.prototype.catch = function(reject){
return bindF.call(this, REJECTED, reject)
}
/*
finally方法用于指定不管 Promise 对象状态是 resolve 或 reject ,都会执行的操作。
* */
Promise.prototype.finally = function(fina){
return bindF.call(this, FINALLY, fina)
}
return Promise
}()
if (typeof Promise.try !== 'function') {
Promise.try = function(fn){
return new Promise(function (resolve) {
resolve(fn());
});
}
}
最后的 Promise.try
实际开发中,经常遇到一种情况:不知道或者不想区分,函数f是同步函数还是异步操作,但是想用 Promise 来处理它。
一般的,为了确保同步函数同步执行,异步函数异步执行,我们会这么做:
const f1 = () => new Promise(resolve=>{
setTimeout(_=>{
resolve([1,2,3])
},1000)
});
const f2 = _ => ({a: 1});
new Promise( resolve => resolve(f1()) ).then(data=>{console.log(data)})
new Promise( resolve => resolve(f2()) ).then(data=>{console.log(data)})
//{a: 1}
//[1, 2, 3]
同时,这么写还可以更好的处理错误。
如果同步或者异步方法本身是错误的,我们需在外层套一层try来处理,这种写法则可以省略try,使代码更美观。
针对这种写法,现在已经有提案,提供Promise.try方法替代上面的写法。
使用案例:
Promise.try(_=>{
myajax()
}).then(data=>{
console.log(data)
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。