为什么我的 http 拦截器的 HttpResponse 中得到 type:0？

Question

我有以下角度的 http 拦截器

import { Injectable, Inject } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse } from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { tap } from "rxjs/operators";
import { ToastrService } from 'ngx-toastr';
import { NgxSpinnerService } from "ngx-spinner";

@Injectable()
export class AppHttpInterceptor implements HttpInterceptor {

  constructor(
    @Inject('API_URL') private baseUrl: string,
    public router: Router,
    public toasterService: ToastrService,
    private spinner: NgxSpinnerService
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.spinner.show();
    request = request.clone({ url: `${this.baseUrl}/${request.url}` });
    return next.handle(request).pipe(
      tap(evt => {
        console.log(evt)
        if (evt instanceof HttpResponse && (evt.status == 200 || evt.status == 201)) {
          if (evt.body) {
            this.spinner.hide();
            evt.body.message && this.toasterService.success(evt.body.message)
          } else {
            this.spinner.hide();
          } 
        } else {
          console.log('else')
          // alert('else')
          // this.spinner.show();
        }
      }, errEvt => {
        this.spinner.hide();
        errEvt.error.message && this.toasterService.error(errEvt.error.message);
      })
    );
  }
}

当我做console.log(evt)

我在控制台中得到以下输出

{type: 0}
{type: 0}
HttpResponse {
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null
    },
    "status": 200,
    "statusText": "OK",
    "url": "http://localhost:7071/api/getTodo",
    "ok": true,
    "type": 4,
    "body": {
        "success": true,
        "message": null,
        "response": [
            {
                ...
            }
        ]
    }
}

第三次我收到 HttpResponse。为什么一开始我就得到两次 {type: 0}

这给我带来了一个问题，因为除了tap运算符内部的 if 块之外，我希望有 else 块，其中此事件 0 不会给我带来问题。我如何才能只观看 http 响应，而不观看这种类型 0 ？

它来自哪里？没有立即看到 http 响应的原因是什么？

Answer 1

更改tap-> map-operator，您可以选择您正在侦听的 HttpEvent:s。例如：

            map((evt: HttpEvent<any>) => {
                if (evt instanceof HttpResponse) {
                    console.log('res--->>>', evt);
                    // returns actual response
                } else {
                    console.log('req--->>>', evt);
                    // returns {type: 0}
                }
                return evt;
            }),