web-dev-qa-db-ja.com

angular httpインターセプターで観察可能なエラーをスローする方法

インターセプターで観察可能なエラーをスローして、このエラーを処理しようとしました。できません。成功が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);
  }
}
angularangular5angular6
6
thanatos

あなたのインターセプターでこれをやってみてください

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;
);
6
Javier Solis Guzman

キャッチを追加してエラーを処理できます

//....
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);
    }
0
max ivaneychyk

あなたのインターセプターでこれをやってみてください

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