一道常見的面試題

面試題題目

頁面上有一個輸入框，兩個按鈕，A按鈕和B按鈕，點擊A或者B分別會發送一個異步請求，請求完成後，結果會顯示在輸入框中。

題目要求，用戶隨機點擊A和B屢次，要求輸入框顯示結果時，按照用戶點擊的順序顯示，舉例：

用戶點擊了一次A，而後點擊一次B，又點擊一次A，輸入框顯示結果的順序爲先顯示A異步請求結果，再次顯示B的請求結果，最後再次顯示A的請求結果。

思考

當時被問到的時候，幾個想法

1. 寫個高階函數，處理異步請求
2. 怎麼保證順序，我是想將其放入數組中，而後按順序執行

當時也沒寫出來，但以爲頗有意思。回去思考實踐來一下

代碼：

/**
 * A的請求；pA(promise對象)
 * B的請求；pA(promise對象)
 * @click 事件函數 handler
 */
let arr = []
let it
function* main() {
    //進來的是pA，pB封裝後的方法
    const data = yield arr.unshift()()
    if(arr.length > 0) {
        it = main()
        it.next()
    }
}
it = main()
//封裝pA,pB的請求
function pn(promise) {
    return promise.then(res => it.next(res))
}
//當點擊按鈕發送請求時,將相應的請求加入數組中
function handler(pn) {
    arr.push(pn)
    //數組不爲空說明請求觸發中
    if(arr.length = 0) {
        it.next()
    }
}

說明

1. 點擊按鈕時，先發放入請求；數組爲空說明，還沒執行；就先執行；不爲空，則加入數組中，等待執行
2. 利用迭代器，遍歷數組，執行請求
3. 封裝函數fn，思路來自以前看的Generator的異步請求方式

總結

以上是我本身思路，以爲蠻有意思的。寫下來記錄一下