在用 Angular 做項(xiàng)目的時候，遇到了一個有點(diǎn)麻煩的問題。具體問題如下：

10多年的留壩網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整留壩建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“留壩網(wǎng)站設(shè)計(jì)”,“留壩網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

輪循請求某個接口，如何保證接口返回的數(shù)據(jù)與請求的順序相同？

實(shí)際的業(yè)務(wù)場景是這樣的：前端需要輪循請求后端接口獲取文件處理進(jìn)度，并在前端用進(jìn)度條展示。如下方所示：

首先想到的肯定是使用 setTimeout 或者 setInterval 進(jìn)行定時請求。然而結(jié)果有點(diǎn)詭異，進(jìn)度條的變化不是遞增，而是有快有慢，比如 30%，20%，50%，40%這樣。仔細(xì)一想也知道問題出在哪，異步請求的結(jié)果并不是按順序返回的。

我在之前的工作中還沒有遇到過這類需求，所以我并不是很清楚如果用傳統(tǒng)方式應(yīng)該如何解決。然而很慶幸的是 RxJS 正好擅長處理這樣的問題。我立即翻了一下文檔，interval 操作符可以處理定時任務(wù)，而且更強(qiáng)大的是返回結(jié)果也是有順序的。

interval(period: 0 = 0, scheduler: SchedulerLike = async): Observable

首先看一下 interval 的說明：

創(chuàng)建一個可觀察對象，在規(guī)定的調(diào)度程序中，以規(guī)定的時間間隔發(fā)出連續(xù)的數(shù)值。

interval 返回一個可觀察對象，它可以周期性的發(fā)出遞增數(shù)值，但是第一次發(fā)出值是在第一個周期結(jié)束之后執(zhí)行的。

以下是官方例子：

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

不過只看官方例子還是有點(diǎn)懵，如果是 http 請求的話應(yīng)該怎么寫參數(shù)呢？或者說應(yīng)該把 http 請求寫在哪里？

這個地方的坑有點(diǎn)深，通過翻閱外文資料終于找到答案。直接上代碼。

// 間隔 1s 請求
this.timer$ = interval(1000)
  .pipe(
    // 取消過時的請求值
    switchMap(() => {
      return this.http.get(API);
    }),
  )
  .subscribe(
    (res: any) => {
      // 百分?jǐn)?shù)處理邏輯
    },
    () => {
      this.timer$.unsubscribe();
    },
    () => {
      this.timer$.unsubscribe();
    },
  );

總的來說就是通過管道處理請求。最終的效果很完美。

總結(jié)

RxJS 確實(shí)是一個非常強(qiáng)大的工具庫，尤其處理異步交互真的是省時省力，但是國內(nèi)技術(shù)文章偏少，遇到疑難問題還需要查閱國外文章。歡迎大家評論交流。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。