溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

rxjs經典場景之http請求

發(fā)布時間:2020-08-12 11:37:43 來源:網絡 閱讀:679 作者:eflypro小普 欄目:開發(fā)技術

在實際開發(fā)中,相信小伙伴們都碰到過接口的串行調用以及并行調用,而并行調用又有兩種,一種是只需最先返回的結果即可,這種比較少見,有時候接口變遷,為了平緩過渡,方便容錯才會出現;另一種則是需要所有請求的接口數據才能進行下一步,這種比較常見,如賬號可用余額是否可以購買商品等。

普通的Ajax請求

在前端遠古時代,碰到以上情況,串行通過嵌套調用來處理,并行通過判斷是否均完成請求的方式來處理。
rxjs經典場景之http請求
rxjs經典場景之http請求
rxjs經典場景之http請求
rxjs經典場景之http請求
但是這樣子處理實際上并不能說符合預期。首先,嵌套調用的方式,如果里面再涉及到其他回調的話,滿滿的回調地獄即視感。其次,判斷請求狀態(tài)的方式,每個接口的回調都要做判斷,并行的接口越多,判斷的條件越多,代碼冗余的越厲害。

Promise異步處理

為了解決回調地獄的問題,ES6將Promise寫進了語言標準并統(tǒng)一了用法。Promise的鏈式調用、race、all方法可以大大改善嵌套調用以及并行調用的問題,并得以解決。
rxjs經典場景之http請求
rxjs經典場景之http請求
rxjs經典場景之http請求
rxjs經典場景之http請求
但是Promise本身是無法取消的,在用于http請求時,會引發(fā)兩個無法忽視的問題:

●在單頁面應用中,resolve回調里需要進行try/catch處理,特別是在回調里有DOM操作的時候。否則,在接口響應慢的時候進行路由切換會導致控制臺報錯,甚至導致頁面陷入無法交互的境地。

●由于接口響應慢而導致的競態(tài)條件問題。

而相比之下,rxjs能解決以上所有問題。

rxjs數據流

rxjs可以說是一套針對數據流的函數響應式編程,有著極其強大而豐富的操作符,可以將所有數據抽象成數據流的形式,使開發(fā)者能以同步編程的方式來進行處理。

首先,在串、并行調用接口時,先利用操作符將數據來源進行處理,然后訂閱即可。
rxjs經典場景之http請求
rxjs經典場景之http請求
rxjs經典場景之http請求
rxjs經典場景之http請求
其次,rxjs是可以取消的,對于Promise出現的兩個問題:

●在切換路由,組件銷毀時調用unsubscribe方法取消訂閱,回調里的邏輯便不會執(zhí)行。

●競態(tài)條件是由于接口異步調用的回調順序不可控導致的,rxjs的switchMap操作符可以確保每次接收到的都是最新一次發(fā)送的值(即最新的接口回調的值)。
睿江云計算官網:http://www.eflycloud.com/home?from=RJ_0027
rxjs經典場景之http請求

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI