脚本宝典收集整理的这篇文章主要介绍了学习并实现一个Promise，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
学习自阮一峰老师 ECMAScript 6 入门 Promise介绍
参考 promise-实现
Promise属于微任务，而模拟的 Promise 都是使用setTimeout，属于宏任务。所以在某些情况下会有bug，需要注意，如：
@H_126_6@
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());
});
}
}实际开发中，经常遇到一种情况：不知道或者不想区分，函数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)
})以上是脚本宝典为你收集整理的学习并实现一个Promise全部内容，希望文章能够帮你解决学习并实现一个Promise所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。