在 angular5 中创建拦截器时，如何让请求执行正常操作？

Question

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { ErrormodalComponent } from '../../features/errormodal/errormodal.component';
import { UploadComponent } from '../../features/upload/upload.component';


@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private _ngbModal: NgbModal) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).do((event: HttpEvent<any>) => {
      // What to do here?
    }, (err: any) => {
      if(err instanceof HttpErrorResponse) {
        switch(err.status) {
          case 404:
            // API not found
            console.log('launch')
            this._ngbModal.open(UploadComponent, {size: 'lg', backdrop: 'static' })
            break
        }

        console.log('err', err)
      }
    })

  }
}

我收到了错误部分，但是如果出现正常、无错误的请求/响应，我该怎么办 What to do here?？

Answer 1

我建议使用 catch 运算符而不是 do :

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
import { Observable } from 'rxjs';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { ErrormodalComponent } from '../../features/errormodal/errormodal.component';
import { UploadComponent } from '../../features/upload/upload.component';


@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private _ngbModal: NgbModal) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).catch((err :  HttpErrorResponse) => {
        switch(err.status) {
          case 404:
            // API not found
            console.log('launch')
            this._ngbModal.open(UploadComponent, {size: 'lg', backdrop: 'static' })
            break
        }

        console.log('err', err);
        return Observable.throw(err);
      });

    }

  }

您需要像这样将 ErrorInterceptor 服务添加到应用程序模块提供程序部分

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

Answer 2

Try something like this:

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

    return next
      .handle(request)
      .map((response: HttpEvent<any>) => {
        if (response instanceof HttpResponse) {

// Here if you want to parse your response you can do it otherwise just let it flow
          return response;
        }
      })
      .catch((response: HttpEvent<any>) => {
        if (response instanceof HttpErrorResponse) {

          return response;
        }
      });
  }

在 angular5 中创建拦截器时，如何让请求执行正常操作？

When creating an interceptor in angular5, how do I let the request do it's normal thing?

angular-http-interceptors

angular