rxjs的幾點使用心得-有解無憂

1.對錯誤的處理

日常使用中，點擊按鈕需要往后臺發訊息，為了不重復發訊息，經常需要把點擊事件做成subject，然后把發訊息的程序做成switchMap，類似下面的寫法

const subject = new rxjs.Subject();
subject.pipe( rxjs.operators.switchMap(index => { return rxjs.of(index); }) ).subscribe({ next: console.log, error: err => console.error('error2', err), complete: () => console.log('complete') });
subject.next(1); subject.next(2); subject.next(3); subject.next(4); subject.complete();

但是如果某一個發訊息的observer報了一個500錯誤，那么會導致后面的點擊事件不會繼續呼叫發訊息的程序，

    const subject = new rxjs.Subject();

    subject.pipe(
      rxjs.operators.switchMap(index => {
        if (index === 2) {
          return rxjs.throwError(new Error('error'));
        }
        return rxjs.of(index);
      })
    ).subscribe({
      next: console.log,
      error: err => console.error('error2', err),
      complete: () => console.log('complete')
    });

    subject.next(1);
    subject.next(2);
    subject.next(3);
    subject.next(4);
    subject.complete();

如上，當index等于2時，rxjs拋出錯誤，后面的3，4都不會執行了，

為了使后臺的錯誤不影響rxjs，我們需要對switchMap里面的observer做catchError的特殊處理，如下：

    const subject = new rxjs.Subject();

    subject.pipe(
      rxjs.operators.switchMap(index => {
        if (index === 2) {
          return rxjs.throwError(new Error('error')).pipe(
            rxjs.operators.catchError(err => {
              return rxjs.empty();
            })
          );
        }
        return rxjs.of(index);
      })
    ).subscribe({
      next: console.log,
      error: err => console.error('error2', err),
      complete: () => console.log('complete')
    });

    subject.next(1);
    subject.next(2);
    subject.next(3);
    subject.next(4);
    subject.complete();

這樣做會跳過拋出錯誤的后臺請求，保證rxjs繼續往下執行，

2.如何保證loading = false必執行

如果rxjs拋出錯誤，subscribe的error分支會執行，complete分支不會執行

如果rxjs不拋出錯誤結束，subscribe的error分支不會執行,complete分支會執行

有個運算子，不管拋不拋出錯誤，他都會執行，

    var loading = true;
    rxjs.from([1,2,3]).pipe(
      rxjs.operators.map(i => {
        if (i === 2) {
          throw new Error('error');
        }
        return i;
      }),
      rxjs.operators.finalize(() => {
        console.log('set loading')
        loading = false;
      })
    ).subscribe({
      next: console.log,
      error: console.error,
      complete: () => console.log('complete')
    });

3.如何依次發送后臺請求

碰到需要同時發送后臺請求時，一般使用forkjoin方法，

如果請求A依賴于請求B的結果，需要A回傳后再發送請求B，這時可以用concat配合bufferCount運算子來實作

    var a = rxjs.Observable.create((observer) => {
      setTimeout(() => observer.next('a1'), 2000);

      // setTimeout(() => observer.error(new Error('error')), 3000);
      setTimeout(() => observer.complete(), 4000);
    });

    var b = rxjs.Observable.create((observer) => {
      setTimeout(() => observer.next('b1'), 2000);
      // setTimeout(() => observer.next('b2'), 3000);
      // setTimeout(() => observer.next('b3'), 3300);
      setTimeout(() => observer.complete(), 4000);
    });

    rxjs.concat(a, b).pipe(
      rxjs.operators.bufferCount(2),
    ).subscribe({
      next: console.log,
      error: err => console.error('error123', err),
      complete: () => console.log('complete')
    });

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549690.html

標籤：其他

上一篇：低代碼系列 —— 中后臺集成低代碼預研

下一篇：如何配置jsconfig.json檔案解決VSCode中無法識別@別名參考的問題