Rxjs 错误类型 &#39;Observable <HttpEvent<any> &gt;&#39;

Question

我最近升级了我的 rxjs 包。 但是我的 Angular 拦截器现在出错了。 这是我的代码：

import { HttpEvent, HttpHandler, HttpResponse, HttpInterceptor, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, tap, catchError } from 'rxjs';
import { Injectable } from '@angular/core';
import { BusyService } from './shared/services/busy.service';
import { Router } from "@angular/router";

@Injectable()
export class ProgressInterceptor implements HttpInterceptor {

    

    constructor(private router: Router, private busyService: BusyService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        

        return next.handle(req).pipe(
            tap((event: HttpEvent<any>) => {
                

                // Only enable and disable buttons if the skip interceptor was NOT set as a header on that call
                if ((req.headers.get('X-Skip-Interceptor') != "True")) {

                    

                    // If request was sent
                    if ((event.type == 0)) {
                        //console.log("busy");
                        this.busyService.changeBusy(true);
                    }
                    else {
                        //console.log("not busy");
                        this.busyService.changeBusy(false);
                    }

                }

            }),
            catchError((err: HttpErrorResponse) => {

                

                let errorReceived;

                if ((typeof err == 'string'))
                {
                    errorReceived = JSON.parse(err);
                }
                else
                {
                    errorReceived = err;
                }

                this.busyService.changeBusy(false);
                

                return Observable.throw(err);
            }));

        
    }
}

这是错误：

Error: src/app/progress.interceptor.ts:17:9 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<HttpEvent<any>>'.
  Type 'unknown' is not assignable to type 'HttpEvent<any>'.
    Property 'type' is missing in type '{}' but required in type 'HttpUserEvent<any>'.

 17         return next.handle(req).pipe(
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 18             tap((event: HttpEvent<any>) => {
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 65                 return Observable.throw(err);
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 66             }));
    ~~~~~~~~~~~~~~~~

  node_modules/@angular/common/http/http.d.ts:3861:5
    3861     type: HttpEventType.User;
             ~~~~
    'type' is declared here.


Error: src/app/progress.interceptor.ts:65:35 - error TS2339: Property 'throw' does not exist on type 'typeof Observable'.

65                 return Observable.throw(err);

我可以找到零信息来更新拦截代码。 该错误甚至没有帮助，因为它引用了我不应该编辑的节点模块文件。

Answer 1

你是从哪个 RxJS 版本迁移过来的？ 在最近的版本中， Observable.throw已替换为throwError 。

1. 您需要对 RxJS 导入语句进行以下更改

import { Observable, throwError } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

并用throwError替换Observable.throw()

catchError((err: HttpErrorResponse) => {
  ...
  return throwError(err);
}

2. 使用 Typescript as断言类型

intercept(
  req: HttpRequest<any>, 
  next: HttpHandler
): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    ...
  ) as Observable<HttpEvent<any>>;
}