在 Angular 中刷新调用后无法重试相同的请求

Question

我无法在刷新调用后重试相同的请求。我试过 next.handle(updated_request) 但仍然不是运行。你能帮忙解决一下吗？

仅供参考：我已在此处附上我的代码。如果我在这里遗漏任何内容，请告诉我。

intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  this.presentLoading();
  const headerSettings = req.headers.keys().reduce((acc, cur) => {
    acc[cur] = req.headers.getAll(cur);
    return acc;
  }, {});
  return fromPromise(this.storage.get('userdata')).pipe(mergeMap((token: any) => {
    if(token)
      headerSettings["Authorization"] = token.access_token;
    let headers = new HttpHeaders(headerSettings),
    newRequest = req.clone({ headers });
    return next.handle(newRequest)
      .pipe(catchError((err: any) => {
          if (err instanceof HttpErrorResponse) {
              // token is expired refresh and try again
              if (err.status === 401) {
                if(token && token.refresh_token) {
                  this.login.refresh(token.refresh_token).subscribe((data: any) => {
                    if(data.data)
                      headerSettings["Authorization"] = data.data.access_token;
                    headers = new HttpHeaders(headerSettings);
                    let retryRequest = newRequest.clone({ headers });
                    return next.handle(retryRequest);
                  });
                } else {
                  this.route.navigate(['/tabs/login']);
                }
              } else {
                return Observable.throw(err.statusText);
              }
          } else {
              return Observable.throw(err.statusText);
          }
      }));
  }))
}

Answer 1

我不太确定为什么你的内部订阅没有触发，但我猜测 RxJS 正在取消它，因为它在代码的一次性部分中。

catchError 期望返回 Observable，但你没有返回任何东西（TypeScript 应该对此发出警告，但由于某种原因它被漏掉了）。

以下可能是更好的方法。 Observable 正在被 catchError 使用 switchMap 订阅。

intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.presentLoading();
    const headerSettings = req.headers.keys().reduce((acc, cur) => {
        acc[cur] = req.headers.getAll(cur);
        return acc;
    }, {});
    return fromPromise(this.storage.get('userdata')).pipe(mergeMap((token: any) => {
        if(token)
        headerSettings["Authorization"] = token.access_token;
        let headers = new HttpHeaders(headerSettings),
        newRequest = req.clone({ headers });
        return next.handle(newRequest)
        .pipe(catchError((err: any) => {
            if (err instanceof HttpErrorResponse) {
                // token is expired refresh and try again
                if (err.status === 401) {
                    if(token && token.refresh_token) {
                    return this.login.refresh(token.refresh_token).pipe(
                        switchMap((data: any) => {
                        if (data.data)
                            headerSettings['Authorization'] =
                                data.data.access_token;
                        headers = new HttpHeaders(
                            headerSettings
                        );
                        let retryRequest = newRequest.clone({
                            headers,
                        });
                        return next.handle(retryRequest);
                    }));
                    } else {
                    this.route.navigate(['/tabs/login']);
                    }
                } else {
                    return Observable.throw(err.statusText);
                }
            } else {
                return Observable.throw(err.statusText);
            }
        }));
    }))
}

在 Angular 中刷新调用后无法重试相同的请求

Not able to retry the same request after refresh call in Anuglar

angular-http-interceptors

angular