es6 -- 透徹掌握Promise的使用,讀這篇就夠了
Promise的重要性我認為我沒有必要多講,概括起來說就是必須得掌握,而且還要掌握透徹。這篇文章的開頭,主要跟大家分析一下,為什麼會有Promise出現。
在實際的使用當中,有非常多的應用場景我們不能立即知道應該如何繼續往下執行。最重要也是最主要的一個場景就是ajax請求。通俗來說,由於網速的不同,可能你得到返回值的時間也是不同的,這個時候我們就需要等待,結果出來了之後才知道怎麼樣繼續下去。
// 簡單的ajax原生實現
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
if (XHR.readyState == 4 && XHR.status == 200) {
result = XHR.response;
console.log(result);
}
}
在ajax的原生實現中,利用了onreadystatechange事件,當該事件觸發並且符合一定條件時,才能拿到我們想要的資料,之後我們才能開始處理資料。
這樣做看上去並沒有什麼麻煩,但是如果這個時候,我們還需要做另外一個ajax請求,這個新的ajax請求的其中一個引數,得從上一個ajax請求中獲取,這個時候我們就不得不如下這樣做:
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
if (XHR.readyState == 4 && XHR.status == 200) {
result = XHR.response;
console.log(result);
// 虛擬碼
var url2 = 'http:xxx.yyy.com/zzz?ddd=' + result.someParams;
var XHR2 = new XMLHttpRequest();
XHR2.open('GET', url, true);
XHR2.send();
XHR2.onreadystatechange = function() {
...
}
}
}
當出現第三個ajax(甚至更多)仍然依賴上一個請求的時候,我們的程式碼就變成了一場災難。這場災難,往往也被稱為回撥地獄。
因此我們需要一個叫做Promise的東西,來解決這個問題。 當然,除了回撥地獄之外,還有一個非常重要的需求:為了我們的程式碼更加具有可讀性和可維護性,我們需要將資料請求與資料處理明確的區分開來。上面的寫法,是完全沒有區分開,當資料變得複雜時,也許我們自己都無法輕鬆維護自己的程式碼了。這也是模組化過程中,必須要掌握的一個重要技能,請一定重視。 從前面幾篇文中的知識我們可以知道,當我們想要確保某程式碼在誰誰之後執行時,我們可以利用函式呼叫棧,將我們想要執行的程式碼放入回撥函式中。// 一個簡單的封裝
function want() {
console.log('這是你想要執行的程式碼');
}
function fn(want) {
console.log('這裡表示執行了一大堆各種程式碼');
// 其他程式碼執行完畢,最後執行回撥函式
want && want();
}
fn(want);
利用回撥函式封裝,是我們在初學JavaScript時常常會使用的技能。
確保我們想要的程式碼壓後執行,除了利用函式呼叫棧的執行順序之外,我們還可以利用上一篇文章所述的佇列機制。
function want() {
console.log('這是你想要執行的程式碼');
}
function fn(want) {
// 將想要執行的程式碼放入佇列中,根據事件迴圈的機制,我們就不用非得將它放到最後面了,由你自由選擇
want && setTimeout(want, 0);
console.log('這裡表示執行了一大堆各種程式碼');
}
fn(want);
如果瀏覽器已經支援了原生的Promise物件,那麼我們就知道,瀏覽器的js引擎裡已經有了Promise佇列,這樣就可以利用Promise將任務放在它的佇列中去。
function want() {
console.log('這是你想要執行的程式碼');
}
function fn(want) {
console.log('這裡表示執行了一大堆各種程式碼');
// 返回Promise物件
return new Promise(function(resolve, reject) {
if (typeof want == 'function') {
resolve(want);
} else {
reject('TypeError: '+ want +'不是一個函式')
}
})
}
fn(want).then(function(want) {
want();
})
fn('1234').catch(function(err) {
console.log(err);
})
看上去變得更加複雜了。可是程式碼變得更加健壯,處理了錯誤輸入的情況。
為了更好的往下擴充套件Promise的應用,這裡需要先跟大家介紹一下Promsie的基礎知識。 一、 Promise物件有三種狀態,他們分別是:- pending: 等待中,或者進行中,表示還沒有得到結果
- resolved(Fulfilled): 已經完成,表示得到了我們想要的結果,可以繼續往下執行
- rejected: 也表示得到結果,但是由於結果並非我們所願,因此拒絕執行
這三種狀態不受外界影響,而且狀態只能從pending改變為resolved或者rejected,並且不可逆。在Promise物件的建構函式中,將一個函式作為第一個引數。而這個函式,就是用來處理Promise的狀態變化。
new Promise(function(resolve, reject) {
if(true) { resolve() };
if(false) { reject() };
})
上面的resolve和reject都為一個函式,他們的作用分別是將狀態修改為resolved和rejected
二、 Promise物件中的then方法,可以接收建構函式中處理的狀態變化,並分別對應執行。then方法有2個引數,第一個函式接收resolved狀態的執行,第二個引數接收reject狀態的執行。
function fn(num) {
return new Promise(function(resolve, reject) {
if (typeof num == 'number') {
resolve();
} else {
reject();
}
}).then(function() {
console.log('引數是一個number值');
}, function() {
console.log('引數不是一個number值');
})
}
fn('hahha');
fn(1234);
then方法的執行結果也會返回一個Promise物件。因此我們可以進行then的鏈式執行,這也是解決回撥地獄的主要方式。
function fn(num) {
return new Promise(function(resolve, reject) {
if (typeof num == 'number') {
resolve();
} else {
reject();
}
})
.then(function() {
console.log('引數是一個number值');
})
.then(null, function() {
console.log('引數不是一個number值');
})
}
fn('hahha');
fn(1234);
then(null, function() {}) 就等同於catch(function() {})
三、Promise中的資料傳遞
大家自行從下面的例子中領悟吧。
var fn = function(num) {
return new Promise(function(resolve, reject) {
if (typeof num == 'number') {
resolve(num);
} else {
reject('TypeError');
}
})
}
fn(2).then(function(num) {
console.log('first: ' + num);
return num + 1;
})
.then(function(num) {
console.log('second: ' + num);
return num + 1;
})
.then(function(num) {
console.log('third: ' + num);
return num + 1;
});
// 輸出結果
first: 2
second: 3
third: 4
OK,瞭解了這些基礎知識之後,我們再回過頭,利用Promise的知識,對最開始的ajax的例子進行一個簡單的封裝。看看會是什麼樣子。
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
// 封裝一個get請求的方法
function getJSON(url) {
return new Promise(function(resolve, reject) {
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
if (XHR.readyState == 4) {
if (XHR.status == 200) {
try {
var response = JSON.parse(XHR.responseText);
resolve(response);
} catch (e) {
reject(e);
}
} else {
reject(new Error(XHR.statusText));
}
}
}
})
}
getJSON(url).then(resp => console.log(resp));
為了健壯性,處理了很多可能出現的異常,總之,就是正確的返回結果,就resolve一下,錯誤的返回結果,就reject一下。並且利用上面的引數傳遞的方式,將正確結果或者錯誤資訊通過他們的引數傳遞出來。
現在所有的庫幾乎都將ajax請求利用Promise進行了封裝,因此我們在使用jQuery等庫中的ajax請求時,都可以利用Promise來讓我們的程式碼更加優雅和簡單。這也是Promise最常用的一個場景,因此我們一定要非常非常熟悉它,這樣才能在應用的時候更加靈活。
四、Promise.all
當有一個ajax請求,它的引數需要另外2個甚至更多請求都有返回結果之後才能確定,那麼這個時候,就需要用到Promise.all來幫助我們應對這個場景。
Promise.all接收一個Promise物件組成的陣列作為引數,當這個陣列所有的Promise物件狀態都變成resolved或者rejected的時候,它才會去呼叫then方法。
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var url1 = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-03-26/2017-06-10';
function renderAll() {
return Promise.all([getJSON(url), getJSON(url1)]);
}
renderAll().then(function(value) {
// 建議大家在瀏覽器中看看這裡的value值
console.log(value);
})
五、 Promise.race
與Promise.all相似的是,Promise.race都是以一個Promise物件組成的陣列作為引數,不同的是,只要當陣列中的其中一個Promsie狀態變成resolved或者rejected時,就可以呼叫.then方法了。而傳遞給then方法的值也會有所不同,大家可以再瀏覽器中執行下面的例子與上面的例子進行對比。function renderRace() {
return Promise.race([getJSON(url), getJSON(url1)]);
}
renderRace().then(function(value) {
console.log(value);
})
嗯,我所知道的,關於Promise的基礎知識就這些了,如果還有別的,歡迎大家補充。