学习并实现一个Promise

学习自阮一峰老师 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(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){
		bindF.call(this, RESOLVED, resolve)
		return bindF.call(this, REJECTED, reject)
	}
	
	/*
	 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方法替代上面的写法。