溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在用 Angular 做項目的時候，遇到了一個有點麻煩的問題。具體問題如下：
輪循請求某個接口，如何保證接口返回的數據與請求的順序相同？
實際的業務場景是這樣的：前端需要輪循請求后端接口獲取文件處理進度，并在前端用進度條展示。如下方所示：
首先想到的肯定是使用 setTimeout 或者 setInterval 進行定時請求。然而結果有點詭異，進度條的變化不是遞增，而是有快有慢，比如 30%，20%，50%，40%這樣。仔細一想也知道問題出在哪，異步請求的結果并不是按順序返回的。
我在之前的工作中還沒有遇到過這類需求，所以我并不是很清楚如果用傳統方式應該如何解決。然而很慶幸的是 RxJS 正好擅長處理這樣的問題。我立即翻了一下文檔，interval 操作符可以處理定時任務，而且更強大的是返回結果也是有順序的。
interval(period: 0 = 0, scheduler: SchedulerLike = async): Observable<number>
首先看一下 interval 的說明：
創建一個可觀察對象，在規定的調度程序中，以規定的時間間隔發出連續的數值。
interval 返回一個可觀察對象，它可以周期性的發出遞增數值，但是第一次發出值是在第一個周期結束之后執行的。
以下是官方例子：
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
const numbers = interval(1000);
const takeFourNumbers = numbers.pipe(take(4));
takeFourNumbers.subscribe(x => console.log('Next: ', x));
// Logs:
// Next: 0
// Next: 1
// Next: 2
// Next: 3
不過只看官方例子還是有點懵，如果是 http 請求的話應該怎么寫參數呢？或者說應該把 http 請求寫在哪里？
這個地方的坑有點深，通過翻閱外文資料終于找到答案。直接上代碼。
// 間隔 1s 請求
this.timer$ = interval(1000)
.pipe(
// 取消過時的請求值
switchMap(() => {
return this.http.get(API);
}),
)
.subscribe(
(res: any) => {
// 百分數處理邏輯
},
() => {
this.timer$.unsubscribe();
},
() => {
this.timer$.unsubscribe();
},
);
總的來說就是通過管道處理請求。最終的效果很完美。
總結
RxJS 確實是一個非常強大的工具庫，尤其處理異步交互真的是省時省力，但是國內技術文章偏少，遇到疑難問題還需要查閱國外文章。歡迎大家評論交流。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
