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
    })
   複製程式碼