前端基礎進階（十三）：透徹掌握Promise的使用，讀這篇就夠了(轉)
https://www.jianshu.com/p/fe5f173276bd
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的基礎知識就這些了，如果還有別的，歡迎大家補充。
那麼接下來，我們要結合三個不同的應用場景來讓大家感受一下Promise在模組系統中如何使用。
這裡選擇requirejs是因為學習成本最低，能夠快速上手進行簡單的運用。接下來的這些例子，會涉及到很多其他的知識，因此如果想要徹底掌握，一定要動手實踐，自己試著完成一遍。
我在github上建立了對應的專案，大家可以直接clone下來進行學習。這樣學習效果會更好。
往下閱讀例子之前，請一定要對requirejs有一個簡單的瞭解。
requirejs中文文件 http://www.requirejs.cn/
程式碼結構
專案的程式碼結果如上圖所示，所有的html檔案都放在根目錄下。
- pages: html直接引入的js
- libs: 常用的庫
- components: 針對專案自定義的模組
首先為了能夠讓require起作用，我們需要在html中引入require.js，寫法如下：
// index.js為入口檔案
<script data-main="./pages/index.js" src="./libs/require.js"></script>
在入口的index.js中，我們可以對常用的模組進行對映配置，這樣在引入時就可以少寫一些程式碼。
// 具體的配置項的含義，請參閱require的中文文件
requirejs.config({
baseUrl: './',
paths: {
jquery: "./libs/jquery-3.2.0",
API: './libs/API',
request: './libs/request',
calendar: './components/calendar',
imageCenter: './components/imageCenter',
dialog: './components/Dialog'
}
})
配置之後，那麼我們在其他模組中，引入配置過的模組，就可以簡單的這樣寫：
var $ = require('jquery');
如果不進行配置，也可以這樣引入模組：
require('./components/button');
我們可以使用define定義一個模組：
// 其他方式請參閱文件
define(function(require) {
})
使用return可以直接對外提供方法：
// 在其他模組通過require引入時得到的值，就是這裡返回的值
define(function(require) {
return {
a: 1
}
})
OK，瞭解上面這些，應付基礎的使用已經沒有問題了。我們接下來重點總結第一個常用的應用場景：ajax。
關於ajax的簡單使用和簡單封裝，我們在上面都已經講過了，這裡就不再多說，直接使用jquery封裝好的方法即可。而我們需要處理的問題在於，如何有效的將ajax的資料請求和資料處理分別放在不同的模組中進行管理，這樣做的主要目的在於降低後期維護成本，便於管理。
來看看怎麼樣簡單操作的。
首先，將所有的url放在一個模組中統一處理。
// libs/API.js
define(function() {
return {
dayInfo: 'https://hq.tigerbrokers.com/fundamental/finance_calendar/get_day/2017-04-03',
typeInfo: 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-03-26/2017-04-15'
}
})
在實際開發中，url並不是直接通過字串就能直接確認的，某些url還需要通過引數拼接等，這個時候需要我們靈活處理。
第二步，將所有的資料請求這個動作放在同一個模組中統一管理。
// libs/request.js
define(function(require) {
var API = require('API');
// 因為jQuery中的get方法也是通過Promise進行了封裝，最終返回的是一個Promise物件，因此這樣我們就可以將資料請求與資料處理放在不同的模組
// 這樣我們就可以使用一個統一的模組來管理所有的資料請求
// 獲取當天的資訊
getDayInfo = function() {
return $.get(API.dayInfo);
}
// 獲取type資訊
getTypeInfo = function() {
return $.get(API.typeInfo);
};
return {
getDayInfo: getDayInfo,
getTypeInfo: getTypeInfo
}
});
在這個模組中，我們還可以對拿到的資料進行一些你需要的過濾處理，確保最終返回給下一個模組的資料是能夠直接使用的。
第三步：就是拿到資料並且處理資料了。
// components/calendar.js
define(function(require) {
var request = require('request');
// 拿到資料之後，需要處理的元件，可以根據資料渲染出需求想要的樣式
// 當然這裡為了簡化，就僅僅只是輸出資料就行了，在實際中，拿到資料之後還要進行相應的處理
request.getTypeInfo()
.then(function(resp) {
// 拿到資料，並執行處理操作
console.log(resp);
})
// 這樣，我們就把請求資料，與處理資料分離開來，維護起來就更加方便了，程式碼結構也足夠清晰
})
這就是我所瞭解的處理ajax的比較好的一個方式，如果你有其他更好的方式也歡迎分享。
第二個應用場景就是圖片載入的問題。
在一些實際應用中，常常會有一些圖片需要放置在某一個塊中，比如頭像，比如某些圖片列表。可是源圖片的尺寸可能很難保證長寬比例都是一致的，如果我們直接給圖片設定寬高，就有可能導致圖片變形。變形之後高大上的頁面就直接垮掉了。
因此為了解決這個問題，我們需要一個定製的image元件來解決這個問題。我們期望圖片能夠根據自己的寬高比，合理的縮放，保證在這個塊中不變形的情況下儘可能的顯示更多的內容。
假如有一堆圖片，如下：
<section class="img-wrap">
<div class="img-center">
</div>
<div class="img-center">
</div>
<div class="img-center">
</div>
<div class="img-center">
</div>
</section>
每一張圖片都有一個包裹的div，這些div的寬高，就是我們期望圖片能保持的寬高。
當圖片寬度值過大時，我們期望圖片的高度為100%，並且左右居中。
當圖片高度值過大時，我們期望圖片的寬度為100%，並且上下居中。
根據這一點，我們來看看具體怎麼實現。
首先是樣式的定義很重要。
.img-center {
width: 200px;
height: 150px;
margin: 20px;
overflow: hidden;
position: relative;
}
.img-center img {
display: block;
position: absolute;
}
.img-center img.aspectFill-x {
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.img-center img.aspectFill-y {
height: 100%;
left: 50%;
transform: translateX(-50%);
}
我分別定義了aspectFill-x與aspectFill-y，通過判斷不同的寬高比，來決定將他們中的其中一個加入到img標籤的class中去即可。
獲取圖片的原始寬高，需要等到圖片載入完畢之後才能獲取。而當圖片已經存在快取時，則有一個compete屬性變成true。那麼我們就可以根據這些基礎知識，定義一個模組來處理這件事情。
// components/imageCenter.js
define(function(require) {
// 利用Promise封裝一個載入函式，這裡也是可以單獨放在一個功能模組中進一步優化
var imageLoad = function(img) {
return new Promise(function(resolve, reject) {
if (img.complete) {
resolve();
} else {
img.onload = function(event) {
resolve(event);
}
img.onerror = function(err) {
reject(err);
}
}
})
}
var imageCenter = function(domList, mode) {
domList.forEach(function(item) {
var img = item.children[0];
var itemW = item.offsetWidth;
var itemH = item.offsetHeight;
var itemR = itemW / itemH;
imageLoad(img).then(function() {
var imgW = img.naturalWidth;
var imgH = img.naturalHeight;
var imgR = imgW / imgH;
var resultMode = null;
switch (mode) {
// 這樣寫是因為期待未來可以擴充套件其他的展示方式
case 'aspectFill':
resultMode = imgR > 1 ? 'aspectFill-x' : 'aspectFill-y';
break;
case 'wspectFill':
resultMode = itemR > imgR ? 'aspectFill-x' : 'aspectFill-y'
break;
default:
}
$(img).addClass(resultMode);
})
})
}
return imageCenter;
})
那麼在使用時，直接引入這個模組並呼叫imageCenter方法即可。
// index.js
var imageCenter = require('imageCenter');
var imageWrapList = document.querySelectorAll('.img-center');
imageCenter(imageWrapList, 'wspectFill');
一堆尺寸亂七八糟的圖片就這樣被馴服了
第三個應用場景，則是自定義彈窗的處理。
這種型別的彈窗隨處可見，而且十分常用
因此自己專門定義一個常用的彈窗就變得非常有必要，這對於我們開發效率的提高非常有幫助。當然，我這裡只是簡單的寫了一個簡陋的，僅供參考。
我們期望的是利用Promise，當我們點選確認時，狀態變成resolved，點選取消時，狀態變成rejected。這樣也方便將彈窗生成與後續的操作處理區分開來。
先定義一個Dialog模組。使用的是最簡單的方式定義，應該不會有什麼理解上的困難。主要提供了show和hide2個方法，用於展示和隱藏。
// components/Dialog.js
define(function(require) {
// 利用閉包的特性，判斷是否已經存在例項
var instance;
function Dialog(config) {
this.title = config.title ? config.title : '這是標題';
this.content = config.content ? config.content : '這是提示內容';
this.html = '<div class="dialog-dropback">' +
'<div class="container">' +
'<div class="head">'+ this.title +'</div>' +
'<div class="content">'+ this.content +'</div>' +
'<div class="footer">' +
'<button class="cancel">取消</button>' +
'<button class="confirm">確認</button>' +
'</div>' +
'</div>' +
'</div>'
}
Dialog.prototype = {
constructor: Dialog,
show: function() {
var _this = this;
if (instance) {
this.destory();
}
$(this.html).appendTo($(document.body));
instance = this;
return new Promise(function(resolve, reject) {
$('.dialog-dropback .cancel').on('click', function(e) {
_this.hide();
reject(e);
})
$('.dialog-dropback .confirm').on('click', function(e) {
_this.hide();
resolve(e);
})
})
},
destory: function() {
instance = null;
$('.dialog-dropback .cancel').off('click');
$('.dialog-dropback .confirm').off('click');
$('.dialog-dropback').remove();
},
hide: function() {
this.destory();
}
}
return function(config) {
return new Dialog(config);
}
})
那麼在另外一個模組中需要使用它時：
define(function(require) {
var Dialog = require('dialog');
$('button.aspect').on('click', function() {
Dialog({
title: '友情提示',
content: '外面空氣不太好，你確定你要出門逛逛嗎？'
}).show().then(function() {
console.log('你點選了確認按鈕.');
}).catch(function() {
console.log('你點選了取消按鈕.');
})
})
})
這三種場景就介紹完了，主要是需要大家通過原始碼來慢慢理解和揣摩。真正掌握之後，相信大家對於Promise在另外的場景中的使用也會變得得心應手。
最後總結一下，這篇文章，涉及到的東西，有點多。大概包括Promise基礎知識，ajax基礎知識，如何利用Promise封裝ajax，如何使用require模組系統，如何在模組中使用Promise，並且對應的三個應用場景又各自有許多需要了解的知識，因此對於基礎稍差的朋友來說，理解透徹了肯定會有一個比較大的進步。當然也會花費你更多的時間。
另外在我們的工作中還有一件非常重要的事情是需要我們持續去做的。那就是將常用的場景封裝成為可以共用的模組，等到下次使用時，就可以直接拿來使用而節省非常多的開發時間。比如我這裡對於img的處理，對於彈窗的處理，都是可以擴充套件成為一個通用的模組的。慢慢積累多了，你的開發效率就可以得到明顯的提高，這些積累，也將會變成你的優勢所在。
後續的文章我會分享如何利用react與es6模組系統封裝的共用元件，大家也可以學習了之後，根據自己的需求，封裝最適合你自己的一套元件。
作者：這波能反殺
連結：https://www.jianshu.com/p/fe5f173276bd
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。