angular http interceptor 使用笔记

interceptor 在app.modulte.ts 中的provides中，

...
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CustomizeInterceptor, multi: true},
  ],
....

interceptor 内容，

...
@Injectable()
export class CustomizeInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  dataHandler(event: HttpResponse<any>): Observable<any> {
    // The full response including the body was received.
    if (event.type === 4) {
      if (event.body && event.body?.code > 0) {
        return throwError(event);
      }
    }
    return of(event);
   }

  errorHandler(error: any): Observable<any> {
    if (error?.status > 500) {
        return throwError(error);
    } else if (error?.status === 200) {
        return of(error);
    }
    
    return of(error);
  }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      mergeMap((event) => this.dataHandler(event)),
      catchError((error) => this.errorHandler(error)),
      retry(2));   // 对于catchError 再抛出error 的重试2次
  }
}

service 定义, 预期response 返回数据结构{code: xxx, data: xxx, message: xxx}

listUser() {
    // 一旦http status code 错误，tap complete会执行，但是map 不会执行，说明getUsers 返回是空（不是null/undefined）
    return this.http.get('/users').pipe(tap(
        (res) => console.log(`tap next: ${res}`),
        (err) =>console.log(`tap next: ${err}`),
        () => console.log('tap complete')),
      map((data: UsersResponse) => {
        console.log('list user', data);
        return data?.data;
    }));
  }

component 定义，

...
ngOnInit(): void {
    this.userService.listUser({page: this.pageToLoadNext, perPage: this.pageSize})
      .subscribe((res: any) => {
        console.log('users next', res);
        this.users = res?.results || [];
        this.total = res?.total;
    }, (error) => {
      console.log('users error', error);
    });
  }
...

当response 返回数据为{code: 10001, data: undefined, message: 'unauthroized'}, 控制台打印如下：

user.service.ts:67 {code: 10001, message: 'unauthroized'}
user.service.ts:71 list user {code: 10001, message: 'unauthroized'}
users.component.ts:30 user next undefined
user.service.ts:69 finnally user

当response http status code 不为200，而是其他值，譬如502， 控制台打印如下：

       GET http://localhost:4100/users 502 (Bad Gateway)

customize.interceptor.ts:38 error hander HttpErrorResponse {headers: HttpHeaders, status: 502, statusText: 'Bad Gateway', url: 'http://localhost:4100/users', ok: false, …}
auth.interceptor.ts:63 finalize: GET "/users"
        
       # 第一次retry
       GET http://localhost:4100/users 502 (Bad Gateway)

customize.interceptor.ts:38 error hander HttpErrorResponse {headers: HttpHeaders, status: 502, statusText: 'Bad Gateway', url: 'http://localhost:4100/users', ok: false, …}
auth.interceptor.ts:63 finalize: GET "/users"

	   # 第二次retry
       GET http://localhost:4100/users 502 (Bad Gateway)

customize.interceptor.ts:38 error hander HttpErrorResponse {headers: HttpHeaders, status: 502, statusText: 'Bad Gateway', url: 'http://localhost:4100/users', ok: false, …}
customize.interceptor.ts:63 finalize: GET "/users"

user.service.ts:68 'tap error: [Object Object]'
users.component.ts:34 'users error' HttpErrorResponse {headers: HttpHeaders, status: 502, statusText: 'Bad Gateway', url: 'http://localhost:4100/users', ok: false, …}

实验得知，当http status code >= 400 后，service 文件中的map operator 不会进入，但是会被component 文件中的error subscribe 捕获，此时可以在此处做更多的处理。