Promise控制異步流程怎么實現

本篇內容介紹了“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的執行順序一致了。

“Promise控制異步流程怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！