ES6新特性Promise詳解
在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) {
if(!(arr instanceof Array&&arr.constructor == Array)){//判斷是否是陣列
return new MyPromise((resolve,reject)=>{
reject('引數型別只能是陣列')
})
}
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) {
if(!(arr instanceof Array&&arr.constructor == Array)){//判斷是否是陣列
return new MyPromise((resolve,reject)=>{
reject('引數型別只能是陣列')
})
}
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地址：github.com/RanCW/promi…（歡迎大家star）
參考文獻：