angular - 如何在角度 http 拦截器中抛出可观察到的错误

Question

我试图在拦截器中抛出一个可观察到的错误，然后处理这个错误。但我不能。当success为false时，我也可以收到成功订阅。

我试图再次返回一个值next.handle(restReq)。但我失败了，没有订阅任何东西

restApi 像这样返回

{
  "success": false,
  "data": {
    "name": "Bad Request",
    "message": "123",
    "code": 0,
    "status": 400,
    "type": "yii\\web\\BadRequestHttpException"
  }
}

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private sessionUrl = '/wechat/session';

  constructor(
    private http: HttpClient
  ) { }

  getSession(): Observable<any> {
    return this.http.post<any>(this.sessionUrl, {});
  }
}

auth.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@core/services/auth.service';
import { interval } from 'rxjs/internal/observable/interval';
import { switchMap, take } from 'rxjs/operators';

@Component({
 selector: 'app-auth',
 templateUrl: './auth.component.html',
 styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {
  constructor(
    private authService: AuthService
  ) { }

  ngOnInit(): void {
    this.authService.getLoginQrcode()
      .subscribe(
        data => console.log(data),
        error => console.log(error);
  }
}

http-interceptor.ts

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

import { Observable } from 'rxjs';

@Injectable()
export class RestInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let baseUrl = environment.baseUrl + '/' + environment.version;
    let headers = req.headers;
    const restReq = req.clone({
      headers,
      withCredentials: true
    });

    return next.handle(restReq);
  }
}

Answer 1

尝试在您的拦截器中执行此操作

return next.handle(request).map((event: HttpEvent<any>) => {
       if (event instanceof HttpResponse && event.body && !event.body.success) {
         throw new HttpErrorResponse({
                            error: 'your error',
                            headers: evt.headers,
                            status: 500,
                            statusText: 'Warning',
                            url: evt.url
                        });
       }
       return event;
    );

Answer 2

您可以添加捕获和处理错误

//....
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
    constructor(private inj: Injector, private _router: Router) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Get the auth header from the service.
        const auth = this.inj.get(AuthService);
        const authToken = auth.getSessionData().accessToken || '';
        const duplicate = req.clone({headers: req.headers.set('Authorization', authToken)});
        return next.handle(duplicate).catch(this.handleError);
    }

    private handleError = (response: any) => {
// ....
        // Do messaging and error handling here
        return Observable.throw(response);
    }

Answer 3

尝试在您的拦截器中执行此操作

return next.handle(request).map((event: HttpEvent<any>) => {
  if (event instanceof HttpResponse && !event.body.success) {
    throw new Error(event.body.message);
  }
  return event;
  );