Promise面試題，控制非同步流程
摘要：
有這樣一道關於promise的面試題，描述如下：
頁面上有一個輸入框，兩個按鈕，A按鈕和B按鈕，點選A或者B分別會發送一個非同步請求，請求完成後，結果會顯示在輸入框中。
題目要求，使用者隨機點選A和B多次，要求輸入框顯示結果時，按照使用者點選的順序顯示，舉例：
使用者點選了一次A，...
有這樣一道關於promise的面試題，描述如下：
頁面上有一個輸入框，兩個按鈕，A按鈕和B按鈕，點選A或者B分別會發送一個非同步請求，請求完成後，結果會顯示在輸入框中。
題目要求，使用者隨機點選A和B多次，要求輸入框顯示結果時，按照使用者點選的順序顯示，舉例：
使用者點選了一次A，然後點選一次B，又點選一次A，輸入框顯示結果的順序為先顯示A非同步請求結果，再次顯示B的請求結果，最後再次顯示A的請求結果。
UI介面如圖：
這個需求該如何用promise來實現呢？程式碼如下：
//dom元素
var a = document.querySelector("#a")
var b = document.querySelector("#b")
var i = document.querySelector("#ipt");
//全域性變數p儲存promie例項
var P = Promise.resolve();
a.onclick= function(){
//將事件過程包裝成一個promise並通過then鏈連線到
//全域性的Promise例項上，並更新全域性變數，這樣其他點選
//就可以拿到最新的Promies執行鏈
P = P.then(function(){
//then鏈裡面的函式返回一個新的promise例項
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve()
i.value = "a";
},1000)
})
})
}
b.onclick= function(){
P = P.then(function(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve()
console.log("b")
i.value = "b"
},2000)
})
})
}
我們用定時器來模擬非同步請求，仔細於閱讀程式碼我們發現，在全域性我們定義了一個全域性P，P儲存了一個promise的例項。
然後再觀察點選事件的程式碼，使用者每次點選按鈕時，我們在事件中訪問全域性Promise例項，將非同步操作包裝到成新的Promise例項，然後通過全域性Promise例項的then方法來連線這些行為。
連線的時候需要注意，then鏈的函式中必須將新的promise例項進行返回，不然就會執行順序就不正確了。
需要注意的是，then鏈連線完成後，我們需要更新全域性的P變數，只有這樣，其它點選事件才能得到最新的Promise的執行鏈。
這樣每次使用者點選按鈕就不需要關心回撥執行時機了，因為promise的then鏈會按照其連線順序依次執行。
這樣就能保證使用者的點選順序和promise的執行順序一致了。
大家有其他方法或者問題可以留言，或者直接傳送訊息。
歡迎關注、轉發、點選好看