在ES6當中添加了很多新的API其中很值得一提的當然少不了Promise，因為Promise的出現，很輕松的就給開發人員解決了異步回調地獄的問題，廢話不多，直接上代碼：
在以前我們有個一個異步函數，而且還會有返回值給別的功能函數使用，函數如下：
//異步函數延時兩秒執行
function testA() {
? setTimeout(function () {
? ? return 200;
? },2000)
}
//其它功能函數
function testB(val) {
? console.log(val)
}
//將testA異步函數的返回值當成參數來使用
testB(testA());//遺憾的是這里輸出的是undefined，原因是因為異步函數的調用是在主程序之后
//想要使用testA異步函數的值，解決方案有兩種
// 1.那么我們只能將功能函數的功能集成到異步函數A當中來使用了
function testA() {
? setTimeout(function () {
? ? console.log(200);//功能模塊
? },2000)
}
testA();
// 2.把testB當成testA的回調函數來使用
function testA(callback) {
? setTimeout(function () {
? ? callback(200);//功能模塊
? },2000)
}
function callback(val) {
? console.log(200)
}
testA(callback);
但是這兩種方式存在的問題很多，例如層級之間的嵌套太深，代碼很臃腫，可讀性與可維護性都極低。
直到ES6當中Promise的出現，這樣子的事情就變得很簡單了：
//要想創建一個Promise對象、可以使用new來調用Promise的構造器來進行實例化，實例化時可傳一個函數
//對通過new生成的promise對象為了設置其值在 resolve(成功) / reject(失敗)時調用的回調函數
// 可以使用promise.then() 實例方法。
//promise.then(onFulfilled, onRejected)
//resolve(成功)時，onFulfilled 會被調用
//reject(失敗)時，onRejected 會被調用
let P1=new Promise((resolve,reject)=>{
? setTimeout(function () {
? ? resolve(200)
? },2000)
}).then(res=>{
? console.log(res)
})
通過Promise的使用上面兩種情況是不是就變得很簡單了呢
但是，Promise的實現到底是一個什么樣的原理呢？下面我將會來一一的解析：
因為Promise要以實例化的方式來使用，所以需要創建一個類MyPromise，示例如下：
class MyPromise{
? ? constructor(callback){
? ? ? ? try{
? ? ? ? ? ? callback(this.resolve.bind(this),this.reject.bind(this))
? ? ? ? }catch (err){
? ? ? ? ? ? this.reject(err)
? ? ? ? }
? ? ? ? this.status='pending';//狀態——pending-等待，fulfilled-成功，rejected-失敗
? ? ? ? this.onRejectedCallback=[];//失敗回調集合
? ? ? ? this.onFulfilledCallback=[];//成功回調集合
? ? ? ? this.value=undefined;//成功返回值
? ? ? ? this.reason=undefined;//失敗返回值
? ? }
? ? resolve(res){
? ? ? ? if(this.status==='pending'){
? ? ? ? ? ? this.status='fulfilled';
? ? ? ? ? ? this.value=res;
? ? ? ? ? ? this.onFulfilledCallback.forEach((item)=>{
? ? ? ? ? ? ? ? item(this.value);
? ? ? ? ? ? })
? ? ? ? }
? ? }
? ? reject(err){
? ? ? ? if(this.status==='pending'){
? ? ? ? ? ? this.status='rejected';
? ? ? ? ? ? this.reason=err;
? ? ? ? ? ? this.onRejectedCallback.forEach((item)=>{
? ? ? ? ? ? ? ? item(this.reason);
? ? ? ? ? ? })
? ? ? ? }
? ? }
? ? then(resolve,reject){
? ? ? ? resolve = typeof resolve == 'function'?resolve:function(value){return value};
? ? ? ? reject = typeof reject=='function'?reject:function(reason){
? ? ? ? ? ? throw reason;
? ? ? ? };
? ? ? ? this.resolve=resolve;
? ? ? ? this.reject=reject;
? ? ? ? let self=this;
? ? ? ? if(self.status == 'fulfilled'){
? ? ? ? ? ? resolve(self.value);
? ? ? ? }
? ? ? ? if(self.status == 'rejected'){
? ? ? ? ? ? reject(self.reason);
? ? ? ? }
? ? ? ? if(self.status == 'pending'){
? ? ? ? ? ? self.onFulfilledCallback.push(resolve);
? ? ? ? ? ? self.onRejectedCallback.push(reject);
? ? ? ? }
? ? }
}
//測試
let test=new MyPromise(function (resolve,reject) {
? ? ? ? setTimeout(function () {
? ? ? ? ? ? resolve(1000)
? ? ? ? },2000)
})
test.then(res=>{
? ? console.log(res)
},err=>{
? ? console.log(err+'err')
})
按照上述的示例，一個簡單的基礎Promise就實現了，但是我們會發現ES6提供的Promise當中可以按照jQuery一樣的鏈式調用，如下：
var origin=new Promise((resolve,reject)=>{
? ? setTimeout(function () {
? ? ? ? resolve('成功')
? ? },2000)
})
//鏈式調用
origin.then(res=>{
? ? console.log(res)
? ? return res;
}).then(res=>{
? ? console.log(res)
})
在jQuery當中的鏈式調用大家都清楚，jQuery之所以能夠實現鏈式調用是因為每個jQuery方法返回的JQuery對象本身，那么在Promise里，其實每個Promise的then方法里面返回的都是一個全新的promise，原理如下：
class MyPromise {
? ? constructor(callback) {
? ? ? ? this.status = 'pending';//狀態——pending-等待，fulfilled-成功，rejected-失敗
? ? ? ? this.onRejectedCallback = [];//失敗回調集合
? ? ? ? this.onFulfilledCallback = [];//成功回調集合
? ? ? ? this.value = undefined;//成功回調
? ? ? ? this.reason = undefined;//失敗回調
? ? ? ? try {
? ? ? ? ? ? callback(this.resolve.bind(this), this.reject.bind(this))
? ? ? ? } catch (err) {
? ? ? ? ? ? this.reject(err)
? ? ? ? }
? ? }
? ? resolve(res) {
? ? ? ? if (res instanceof MyPromise) {
? ? ? ? ? ? return res.then(res.resolve.bind(this),res.reject.bind(this));
? ? ? ? }
? ? ? ? if (this.status === 'pending') {
? ? ? ? ? ? this.status = 'fulfilled';
? ? ? ? ? ? this.value = res;
? ? ? ? ? ? this.onFulfilledCallback.forEach((item) => {
? ? ? ? ? ? ? ? item(this.value);
? ? ? ? ? ? })
? ? ? ? }
? ? }
? ? reject(err) {
? ? ? ? if (this.status === 'pending') {
? ? ? ? ? ? this.status = 'rejected';
? ? ? ? ? ? this.reason = err;
? ? ? ? ? ? this.onRejectedCallback.forEach((item) => {
? ? ? ? ? ? ? ? item(this.reason);
? ? ? ? ? ? })
? ? ? ? }
? ? }
? ? resolvePromise(returnPromise, x, resolve, reject) {
? ? ? ? let then;
? ? ? ? //如果x就是returnPromise
? ? ? ? if (returnPromise === x) {
? ? ? ? ? ? return reject(new TypeError('循環引用'));
? ? ? ? }
? ? ? ? if (x instanceof MyPromise||x instanceof Promise) {
? ? ? ? ? ? if(x instanceof Promise){
? ? ? ? ? ? ? ? x.then(function (val) {
? ? ? ? ? ? ? ? ? ? resolve(val)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? if (x.status == 'pending') {
? ? ? ? ? ? ? ? ? ? x.then(function (y) {
? ? ? ? ? ? ? ? ? ? ? ? this.resolvePromise(returnPromise, y, resolve, reject);
? ? ? ? ? ? ? ? ? ? }, reject);
? ? ? ? ? ? ? ? } else if (x.status == 'fulfilled') {
? ? ? ? ? ? ? ? ? ? resolve(x.value);
? ? ? ? ? ? ? ? } else if (x.status == 'rejected') {
? ? ? ? ? ? ? ? ? ? reject(x.reason);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? } else if (x != null && (typeof x == 'object' || typeof x == 'function')) {
? ? ? ? ? ? try {
? ? ? ? ? ? ? ? then = x.then;
? ? ? ? ? ? ? ? if (typeof then == 'function') {
? ? ? ? ? ? ? ? ? ? then.call(x, function (y) {
? ? ? ? ? ? ? ? ? ? ? ? this.resolvePromise(returnPromise, y, resolve, reject)
? ? ? ? ? ? ? ? ? ? }, reject);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } catch (e) {
? ? ? ? ? ? ? ? reject(e);
? ? ? ? ? ? };
? ? ? ? } else {
? ? ? ? ? ? resolve(x);
? ? ? ? }
? ? }
? ? then(resolve, reject) {
? ? ? ? resolve = typeof resolve == 'function' ? resolve : function (value) {
? ? ? ? ? ? return value
? ? ? ? };
? ? ? ? reject = typeof reject == 'function' ? reject : function (reason) {
? ? ? ? ? ? throw reason;
? ? ? ? };
? ? ? ? this.resolve = resolve;
? ? ? ? this.reject = reject;
? ? ? ? let returnPromise;//返回的新promise
? ? ? ? let self = this;
? ? ? ? if (this.status == 'pending') {//等待狀態
? ? ? ? ? //創建返回的新的MyPromise
? ? ? ? ? //這里通過returnPromise，returnResolve，returnReject等命名主要是為了區分是之前的與新的返回的MyPromise對象的屬性
? ? ? ? ? ? returnPromise = new MyPromise(function (returnResolve, returnReject) {
? ? ? ? ? ? ? ? self.onFulfilledCallback.push(function () {
? ? ? ? ? ? ? ? ? ? let x = resolve(self.value);
? ? ? ? ? ? ? ? ? ? self.resolvePromise(returnPromise, x, returnResolve, returnReject);
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? self.onRejectedCallback.push(function () {
? ? ? ? ? ? ? ? ? ? let x = reject(self.reason);
? ? ? ? ? ? ? ? ? ? self.resolvePromise(returnPromise, x, returnResolve, returnReject);
? ? ? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? if (this.status == 'fulfilled') {//成功
? ? ? ? ? //創建返回的新的MyPromise
? ? ? ? ? ? returnPromise = new MyPromise(function (returnResolve, returnReject) {
? ? ? ? ? ? ? ? let x = resolve(self.value);
? ? ? ? ? ? ? ? self.resolvePromise(returnPromise, x, returnResolve, returnReject);
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? if (this.status == 'rejected') {//失敗
? ? ? ? ? ? //創建返回的新的MyPromise
? ? ? ? ? ? returnPromise = new MyPromise(function (returnResolve, returnReject) {
? ? ? ? ? ? ? ? let x = reject(self.reason);
? ? ? ? ? ? ? ? self.resolvePromise(returnPromise, x, returnResolve, returnReject);
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? //返回新的MyPromise
? ? ? ? return returnPromise;
? ? }
}
//測試代碼
let test=new MyPromise(function (resolve,reject) {
? ? ? ? setTimeout(function () {
? ? ? ? ? ? resolve(1000)
? ? ? ? },1000)
})
test.then(res=>{
? ? console.log(res)
? ? return res+200
},err=>{
? ? console.log(err+'err')
}).then(res=>{
? ? console.log(res);
})
按照以上代碼一樣，每個then方法都返回一個全新的MyPromise方法，于是就基本實現了一個ES6中Promise的鏈式調用。
Promise.all
在我們的ES6中還有Promise.all這樣一個方法，該方法主要是傳入一個promise集合，返回一個全新的Promise實例，該全新的Promise實例的返回值為當集合當中所有的集合的所有的Promise都成功時才會返回一個對應的每個Promise成功的返回值的集合，但是只要有一個Promise失敗，就會馬上走到整個Promise.all包裝后的新Promise對象的失敗里面，ES6的使用方法如下：
1.全成功
var winnerPromise = new Promise(function (resolve,reject) {
? ? setTimeout(function () {
? ? ? ? resolve('this is winner');
? ? }, 800);
});
var loserPromise = new Promise(function (resolve,reject) {
? ? setTimeout(function () {
? ? ? ? resolve('this is loser');
? ? }, 1000);
});
Promise.all([winnerPromise, loserPromise]).then(function (value) {
? ? console.log(value);? ? // => 'this is winner'
}).catch(err=>{
? ? console.log(err);
});
//輸出結果
[ 'this is winner', 'this is loser' ]
2.有一個失敗
var winnerPromise = new Promise(function (resolve,reject) {
? ? setTimeout(function () {
? ? ? ? resolve('this is winner');
? ? }, 800);
});
var loserPromise = new Promise(function (resolve,reject) {
? ? setTimeout(function () {
? ? ? ? reject('this is loser');
? ? }, 1000);
});
Promise.all([winnerPromise, loserPromise]).then(function (value) {
? ? console.log(value);? ? // => 'this is winner'
}).catch(err=>{
? ? console.log(err);
});
//輸出
this is loser
對其原理解析：
因為該方法不需要實例化就能使用，于是在我們原本的 MyPromise類上面添加這樣一個靜態方法
static all(arr) {
? ? ? ? return new MyPromise((resolve, reject) => {
? ? ? ? ? ? let result = [];
? ? ? ? ? ? let resolveIndex = 0;
? ? ? ? ? ? let resolved = function (index) {
? ? ? ? ? ? ? ? return function (data) {
? ? ? ? ? ? ? ? ? ? result[index] = data;
? ? ? ? ? ? ? ? ? ? resolveIndex++;
? ? ? ? ? ? ? ? ? ? if (resolveIndex === arr.length) {
? ? ? ? ? ? ? ? ? ? ? ? resolve(result)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? arr.forEach((item, index) => {
? ? ? ? ? ? ? ? item.then(resolved(index), err => {
? ? ? ? ? ? ? ? ? ? reject(err)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
? ? ? ? })
? ? }
以上代碼就在我前面寫的MyPromise類中實現了一個ES6的all方法。
Promise.race
在我們的ES6中還有Promise.race這樣一個方法，該方法主要是傳入一個promise集合，返回一個全新的Promise實例，與Promise.all很相似，但是不同的是，Promise.race方法只要傳入集合中有一個成功或者失敗，返回的全新的Promise實例就馬上成功或者失敗。
ES6代碼如下：
var winnerPromise = new Promise(function (resolve,reject) {
? ? setTimeout(function () {
? ? ? ? resolve('this is winner');
? ? }, 800);
});
var loserPromise = new Promise(function (resolve,reject) {
? ? setTimeout(function () {
? ? ? ? reject('this is loser');
? ? }, 1000);
});
Promise.race([winnerPromise, loserPromise]).then(function (value) {
? ? console.log(value);? ? // => 'this is winner'
}).catch(err=>{
? ? console.log(err);
});
//輸出
this is winner
因為該race方法不需要實例化就能使用，于是同樣在我們的MyPromise上面添加一個static方法，原理解析代碼片段如下：
static race(arr) {
? ? ? ? return new MyPromise((resolve, reject) => {
? ? ? ? ? ? arr.forEach((item, index) => {
? ? ? ? ? ? ? ? item.then(res => {
? ? ? ? ? ? ? ? ? ? resolve(res);
? ? ? ? ? ? ? ? }, err => {
? ? ? ? ? ? ? ? ? ? reject(err)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
? ? ? ? })
? ? }
Promise.catch
ES6中Promise.catch方法其實就是和then方法的reject方法是一樣的應用場景，就是當Promise實例在只能reject的回調函數,ES6代碼如下:
let? test=new Promise(function (resolve, reject) {
? setTimeout(function () {
? ? ? reject(2000)
? },2000)
})
test.then(res=>{
? console.log(res)
}).catch(err=>{
? console.log(err);
})
//輸出2000
在MyPromise當中進行原理解析，代碼片段如下：
catch(catchFunc) {
? ? ? ? return this.then(null, catchFunc);
? ? }
以上就是我對于ES6當中Promise的一些理解，當然在代碼當中肯定有很多的不足，歡迎大家多多交流，多多指正，
完整代碼Github地址：https://github.com/RanCW/promiseDemo
參考文獻：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
