Question

我正在 Angular 10 中开发一个项目。我创建了一个 Http 拦截器来处理 http 错误。我使用过 "map" 和 "of" 运算符。但它显示以下错误：

<块引用>

'Observable' 类型不存在属性 'map'。
14 .map(resp => {

“typeof Observable”类型不存在“of”属性。 31 Observable.of(err);

这是我的拦截器代码：

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpErrorHandlerServiceService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
      .map(resp => {
        if (resp instanceof HttpResponse) {
          return resp;
        }
      })
      .catch(err => {
        console.log(err);
        
        if (err instanceof HttpErrorResponse) {
          console.log(err.status);
          console.log(err.statusText);
          
          if (err.status === 401) {
            // redirect the user to login page
            // 401 unauthorised user
          }          
        }
        return Observable.of(err);
      });
  }
}

谁能建议我的代码有什么问题。

Answer 1

我没有阅读您的整个代码，但从您的错误判断您可以使用 of 运算符修复它：

代替 return Observable.of(err); 做 return of(err); 并添加一个 import `import { Observable, of } from 'rxjs';

编辑

正如 MikeOne 所评论的，您还需要使用地图运算符：

import { catchError, map } from 'rxjs/operators';
...
return next.handle(req)
    .pipe(
      map(resp => { ... }),
      catchError(err => { ... })
    );

`

Answer 2

map 对象中不再有 catch 或 Observable 运算符

改用 pipe :

import { catchError, map } from 'rxjs/operators';

//...
return next.handle(req)
    .pipe(
      map(resp => {
        //....
      }),
      catchError(err => {
        //...
      })
    );

拦截处理http错误导致问题

2 个答案: