您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Promise控制異步流程怎么實(shí)現(xiàn)”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
題目:頁(yè)面上有一個(gè)輸入框,兩個(gè)按鈕,A按鈕和B按鈕,點(diǎn)擊A或者B分別會(huì)發(fā)送一個(gè)異步請(qǐng)求,請(qǐng)求完成后,結(jié)果會(huì)顯示在輸入框中。
題目要求,用戶隨機(jī)點(diǎn)擊A和B多次,要求輸入框顯示結(jié)果時(shí),按照用戶點(diǎn)擊的順序顯示,舉例:
用戶點(diǎn)擊了一次A,然后點(diǎn)擊一次B,又點(diǎn)擊一次A,輸入框顯示結(jié)果的順序?yàn)橄蕊@示A異步請(qǐng)求結(jié)果,再次顯示B的請(qǐng)求結(jié)果,最后再次顯示A的請(qǐng)求結(jié)果。
UI界面如圖:
這個(gè)需求該如何用promise來(lái)實(shí)現(xiàn)呢?代碼如下:
//dom元素
var a = document.querySelector("#a")
var b = document.querySelector("#b")
var i = document.querySelector("#ipt");
//全局變量p保存promie實(shí)例
var P = Promise.resolve();
a.onclick = function(){
//將事件過(guò)程包裝成一個(gè)promise并通過(guò)then鏈連接到
//全局的Promise實(shí)例上,并更新全局變量,這樣其他點(diǎn)擊
//就可以拿到最新的Promies執(zhí)行鏈
P = P.then(function(){
//then鏈里面的函數(shù)返回一個(gè)新的promise實(shí)例
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)
})
})
}
我們用定時(shí)器來(lái)模擬異步請(qǐng)求,仔細(xì)于閱讀代碼我們發(fā)現(xiàn),在全局我們定義了一個(gè)全局P,P保存了一個(gè)promise的實(shí)例。
然后再觀察點(diǎn)擊事件的代碼,用戶每次點(diǎn)擊按鈕時(shí),我們?cè)谑录性L問全局Promise實(shí)例,將異步操作包裝到成新的Promise實(shí)例,然后通過(guò)全局Promise實(shí)例的then方法來(lái)連接這些行為。
連接的時(shí)候需要注意,then鏈的函數(shù)中必須將新的promise實(shí)例進(jìn)行返回,不然就會(huì)執(zhí)行順序就不正確了。
需要注意的是,then鏈連接完成后,我們需要更新全局的P變量,只有這樣,其它點(diǎn)擊事件才能得到最新的Promise的執(zhí)行鏈。
這樣每次用戶點(diǎn)擊按鈕就不需要關(guān)心回調(diào)執(zhí)行時(shí)機(jī)了,因?yàn)閜romise的then鏈會(huì)按照其連接順序依次執(zhí)行。
這樣就能保證用戶的點(diǎn)擊順序和promise的執(zhí)行順序一致了。
“Promise控制異步流程怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。