AngularRxJs如何等待finalizeobservable？

下面的代碼在我的ionic應用程式中攔截任何http請求，并添加一個加載影片和重試邏輯。問題是，如果請求速度較快，finalize()回呼會在加載影片創建之前被呼叫，從而無法洗掉加載影片。

我相信解決方案是在創建加載影片時使用async和await，這樣finalize()回呼就不會在影片創建之前被呼叫，但我沒能使其發揮作用。

export class HttpRequestInterceptor 實作HttpInterceptor {

    loading: any;
    loaderToShow: any;

    constructor()
        private loadingCtrl: LoadingController。
        private alertCtrl: AlertController。
        Private authService: AuthService) {

    }

    intercept（request: HttpRequest<any> , next: HttpHandler）。) Observable<HttpEvent<any> > {

    this.loadingCtrl.getTop（）。 then(hasLoading => {
        if (! hasLoading) {
            this.loading = this.loadingCtrl.create（{
                spinner: '圓形'。
                translucent: true。
            }).then(loading => loading.present()) 。
        }
    })
    
    return next.handle（request）.pipe(
        catchError(err =>  {
            if (err instanceof HttpErrorResponse) {
                console.log（'error'）。
                console.log（err）。
                this.loadingCtrl.getTop（）。 then(hasLoading => {
                    if (hasLoading) {
                        this.loadingCtrl.dismiss（）。
                    }
                });
                switch ((<HttpErrorResponse> err).status) {
                    //Login。
                    case 401:
                        this.PresentFailedAlert(err.error[' message'])。
                        return EMPTY。
                    case 409:
                        this.PresentFailedAlert(err.error[' message'])。
                        return EMPTY。
                    default:
                        return throwError（err）。
                }
            } else {
                return throwError（err）。
            }
        }),
        retryWhen(err =>  {
            let retries = 1;
            return err.pipe(
                delay（3000）。
                map(span class="hljs-params">error => {
                    if (retries   === 3) {
                        拋出錯誤。
                    }
                    return error。
                })
            )
        }),
        //After our all retries failed. 他們可能沒有互聯網或服務器停機了。
        catchError(err =>  {
            console.log（err）。
            this.PresentFailedAlert(err.error[' message'])。
            return EMPTY。
        }),
        //After call is done; }
        finalize(() => {
            delay（500）。
            this.loadingCtrl.getTop（）。 then(hasLoading => {
                if (hasLoading) {
                    this.loadingCtrl.dismiss（）。
                }
            })
        })
    );

    
}

uj5u.com熱心網友回復：

你可以嘗試在finalize塊中使用async函式嗎？

finalize（async() => {
            delay（500）。
            await this.loadingCtrl. getTop().then(hasLoading => {
                if (hasLoading) {
                    this.loadingCtrl.dismiss（）。
                }
            })
        })

uj5u.com熱心網友回復：

由于最后一個catchError回傳的Empty可觀察到的不是錯誤，你可以在它后面添加一個高階映射運算子，如switchMap或switchMapTo，以獲得承諾的結果，并在沒有finalize的情況下做你想要的。

你可以嘗試以下方法：

return next.handle(require).pipe(
  catchError((err) =>  {
    if (err instanceof HttpErrorResponse) {
      console.log（'error'）。
      console.log（err）。
      this.loadingCtrl.getTop（）。 then((hasLoading) =>  {
        if (hasLoading) {
          this.loadingCtrl.dismiss（）。
        }
      });
      switch ((<HttpErrorResponse> err).status) {
        //Login。
        case 401:
          this.PresentFailedAlert(err.error[' message'])。
          return EMPTY。
        case 409:
          this.PresentFailedAlert(err.error[' message'])。
          return EMPTY。
        default:
          return throwError（err）。
      }
    } else {
      return throwError（err）。
    }
  }),
  retryWhen((err) =>/span> {
    let retries = 1;
    return err.pipe(
      delay（3000）。
      map((error) =>/span> {
        if (retries   === 3) {
          拋出錯誤。
        }
        return error。
      })
    );
  }),
  //After our all retries failed. 他們可能沒有互聯網或服務器停機了。
  catchError((err) =>  {
    console.log（err）。
    this.PresentFailedAlert(err.error[' message'])。
    return EMPTY。
  }),
  //After call is done; }
  delay（500）。
  //使用`from`將承諾轉換為可觀測的。
  switchMapTo(from(this. loadingCtrl.getTop()）。)
  //span>檢查hasLoading，之后回傳EMPTY可觀察值。
  switchMap((hasLoading) =>/span> {
    if (hasLoading) {
      this.loadingCtrl.dismiss（）。
    }
    return EMPTY;
  })
  //After call is done 
  // finalize(() => {
  // delay(500);
  // This.loadingCtrl.getTop().then((hasLoading) => {
  // if (hasLoading) {
  // this.loadingCtrl.dismiss(); 
  // }
  // });
  // })
);

標籤：

上一篇：Api呼叫時可觀察到的訂閱空結果

下一篇：在游戲控制臺沒有上傳APK的選項