在 Angular 7 中解析 HTTP 响应？

Question

服务器 returns 格式的数据：{"query": 'queryName', 'result': []}.

我只需要得到结果部分，为此我这样做了：

export class RequestInterception implements HttpInterceptor {

  public constructor(private route: Router) {

  }

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

    return next.handle(request).do((event: HttpEvent<any>) => {
     if (event instanceof HttpResponse) {
            return event.body['result'];
     }
    }, (err: any) => {
        if (err instanceof HttpErrorResponse) {
             if (err.status === 401) {
               this.route.navigate(['/login']);
             }

          return throwError('backend comm error');

        }
    })

};

在 do 运算符中我试过这个：

return event.body['result'];

但它仍然 returns 我整个对象。

AppModule 是：

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

Answer 1

如果你想在拦截器中转换响应，那么你可以使用 map 运算符来完成。您还可以使用 catchError 运算符，然后在其中使用 throwError 以防状态代码为 401.

像这样：

import { Injectable } from '@angular/core';
import { 
  HttpInterceptor, HttpRequest, HttpResponse, 
  HttpHandler, HttpEvent, HttpErrorResponse 
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable()
export class InterceptorService implements HttpInterceptor {

  constructor(private route: Router) { }

  intercept(
    req: HttpRequest<any>, 
    next: HttpHandler
  ) {
    return next.handle(modified)
      .pipe(
        map((event: HttpResponse<any>) => {
          event['body'] = event.body['result'];
          return event;
        }),
        catchError((error: HttpErrorResponse) => {
          if (error.status === 401) {
            this.route.navigate(['/login']);
          }
          return throwError('backend comm error');
        })
      );
  }

}

这里有一个 Sample StackBlitz 供您参考。

Answer 2

HttpReponse 的行为类似于 JSON。例如，为了获取 response 的正文，您可以执行以下操作：

response_body = response["body"]

当然，你必须订阅。

在 Angular 7 中解析 HTTP 响应？

Parse HTTP response in Angular 7?

http

angular

angular7