关于Promise的九深一浅

Promise详解

异步流程的发展过程

• 之前处理异步流程最常用的就是回调，它的好处是非常容易理解，事件1执行完之后，成功执行事件1的回调，即开始事件2的执行，但是缺点是特别容易造成回调地狱，代码难以维护。
• 随后Promise出现了，它是抽象异步处理对象以及对其各种操作的组件
• 其后出现了generator函数，用*修饰函数搭配yield的语法，搭配co（自动执行完迭代器方法）会更方便快捷
• 随着时代的发展，技术的日益更新，出现了优雅的写法，采用async+await的写法，内部其实是generator函数的实现，异步代码实现同步执行的功能。

Promise的使用

Promise表示一个异步操作的最终结果，顾名思义，是一种'承诺'，传入Promise的是一个函数，有两个参数，一个是resolve方法，一个是reject方法，当耗时操作成功返回数据时执行resolve方法，返回数据失败事调用reject方法，之后通过then方法接着进一步处理数据

let p1 = new Promise(function(resolve, reject){
    setTimeout(function(){
    	resolve(100);
    }, 1000);
});
let p2 = p1.then(function(data){
	return new Promise(function(resolve, reject) {
	    setTimeout(() => {
	    	resolve(new Promise(function(resolve, reject){
	    		setTimeout(() => {
	    			resolve(data + 100);
	    		}, 1000);
	    	}));
		}, 1000)
	})
}, function(err) {
	console.log('error', err);
});
p2.then(function(data) {
    console.log('p2成功', data);
},function(err){
    console.log('p2失败', err);
});
复制代码

Promise源码详解

Promise状态

一个Promise必须处在3种状态之一，pending，fullfilled或rejected

• pending:当处在pending状态时，可转向fullfilled或rejected状态

• fullfilled:当处在fullfilled状态时，不能转向任何一种状态，即不可变且必须有值，并且不能够改变

• rejected:当处在rejected状态时，不能转向任何一种状态且必须有个原因，不能够改变

then方法

Promise的then方法接收2个参数，一个是onFulfilled,一个是onRejected,onFulfilled和onRejected都是可选的参数，若onFulfilled或者onRejected不是函数，则直接忽略返回。

若promise的状态为pending，内部返回一个promise实例，并把成功态执行的回调函数保存在一个成功态的数组里，失败态的执行的回调函数保存在另一个失败态数组里。

若promise的状态为fullfilled，内部返回一个promise实例，并把执行结果赋给成功态执行函数，

若promise的状态为rejected，内部返回一个promise实例，并把失败的原因赋给失败态执行函数

Promise.prototype.then = function(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function(value) {return value};
    onRejected = typeof onRejected == 'function' ? onRejected : function(reason) {return reason};
    
    let self = this;
    let promise2;
    if (self.status == FULFILLED) {
        return promise2 = new Promise(function(resolve, reject){
            setTimeout(function(){
                try {
                    let x = onFulfilled(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);    
                }    
            })
        });
    }
    if (self.status == REJECTED) {
        return promise2 = new Promise(function(resolve, reject){
            setTimeout(function(){
                try {
                    let x = onRejected(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);    
                }    
            })
        }); 
    }
    if (self.status == PENDING) {
        return promise2 = new Promise(function(resolve, reject){
            self.onResolvedCallbacks.push(function(){
                try {
                    let x = onFulfilled(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
            self.onRejectedCallbacks.push(function(){
                try {
                    let x = onRejected(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            })
        });
    }
}
复制代码

Promise解析过程

promise解析过程是以一个promise和一个值作为参数的抽象过程.可表示为resolve(promise, x), 若promise与x的值相等使用TypeError将循环引用作为原因将promise拒绝。 若x是一个promise的实例，x的状态为pending，就调用then方法继续解析promise的实例x，否则的话调用resolve方法或reject方法。 若x是一个对象，直接调用resolve方法fullfill promise。 若x是一个函数，继续解析，若失败，就以原因拒绝。 若x既不是对象也不是函数，则以x为值fullfill promise。

function resolvePromise(promise2, x, resolve, reject){
    if (promise2 === x) {
        return reject(new TypeError('循环引用'));
    }
    let called = false;
    if (x instanceof Promise) {
        if (x.status == PENDING) {
            x.then(function(y){
                resolvePromise(promise2, y, resolve, reject);
            }, reject);
        } else {
            x.then(resolve, reject);
        }
    } else if (x != null && ((typeof x == 'object') || (typeof x == 'function'))) {
        try {
            let then = x.then;
            if (typeof then == 'function') {
                then.call(x,function(y){
                    if (called) return;
                    called = true;
                    resolvePromise(promise2, y, resolve, reject);
                }, function(err){
                    if (called) return;
                    called = true;
                    reject(err);
                });
            } else {
                resolve(x);
            }
        } catch(e) {
            if (called) return;
            called = true;
            reject(e);
        }
    } else {
        resolve(x);
    }
}
复制代码

Promise的API

1. Promise.all 生成并返回一个新的Promise对象，参数为一个个promise实例组成的数组，返回结果为一个个promise实例成功执行的数据组成的数组。 注：参数传递的promise所有实例都变为resolve的时候，该方法才会返回，若其中任意一个promise实例返回reject，整个promise.all调用会立即终止，并返回一个reject的promise对象。

    let p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
    Promise.all([p1, p2, p3]).then(function(results){
    	console.log(results); // [1, 2, 3]
    })
   复制代码

2. Promise.race 生成并返回一个新的Promise对象 参数promise数组中的任何一个promise对象如果变成resolve或者reject，该函数就会返回，并使用这个promise对象的值进行resolve或reject。

    let p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
    Promise.race([p1, p2, p3]).then(function(value){
    	console.log(value); // 1
    })
   复制代码