web-dev-qa-db-ja.com

Angular 500サーバーエラーのハンドル

500サーバーエラーの場合、http呼び出しをhandle（catch）に変更するにはどうすればよいですか。 APIを呼び出してみましたが、関数の「err」の部分に「500（Internal server error）」が表示されます。可能であればそれをキャッチできるようにしたいのですが、方法がわかりません。 ？

  call_http() {
    this.http.get<any>('/api/goes/here').subscribe(data => {
      this.result = data;
    },
      err => {
        console.log(err);
      });
  }

ヘッダー、マップ、エラーハンドラーなどは使用していません。これは基本的な呼び出しです。

angularangular-httpclient
3
skydev

エラーオブジェクトのhttpステータスコードを確認し、ユーザーに警告するか、他のアクションを実行できます

call_http() {
    this.http.get<any>('/api/goes/here').subscribe(data => {
      this.result = data;
    },
      err => {
        console.log(err);
       // check error status code is 500, if so, do some action
      });
  }
6
Shiju

HttpClientサービスを使用してバックエンド呼び出しを行うときにエラーをインターセプトし、呼び出しのたびに自分自身を繰り返さない場合は、インターセプターを使用する必要があります。

これは、アプリケーションで使用するものであり、エラーのタイプに応じて、500、400、404、403にリダイレクトし、支払いモーダルを表示するか、トーストメッセージを表示します。

HTTPステータスエラーコード：

export class HttpError{
    static BadRequest = 400;
    static Unauthorized = 401;
    static Forbidden = 403;
    static NotFound = 404;
    static TimeOut = 408;
    static Conflict = 409;
    static InternalServerError = 500;
}

インターセプターコード：

import {Injectable, Injector} from '@angular/core';
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'
import {Observable} from 'rxjs/Observable';
import {AuthorizationService} from "../authorization.service/authorization.service";
import {HttpError} from "./http-error";
import {Router} from "@angular/router";
import {Toaster} from "nw-style-guide/toasts";

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
// Regular dep. injection doesn't work in HttpInterceptor due to a framework issue (as of [email protected]),
// use Injector directly (don't forget to add @Injectable() decorator to class).
constructor(private _injector: Injector) {}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const logFormat = 'background: maroon; color: white';

    return next.handle(req)
        .do(event => {
        }, exception => {
            if (exception instanceof HttpErrorResponse) {
                switch (exception.status) {

                    case HttpError.BadRequest:
                        console.error('%c Bad Request 400', logFormat);
                        break;

                    case HttpError.Unauthorized:
                        console.error('%c Unauthorized 401', logFormat);
                        window.location.href = '/login' + window.location.hash;
                        break;

                    case HttpError.NotFound:
                        //show error toast message
                        console.error('%c Not Found 404', logFormat);
                        const _toaster = this._injector.get(Toaster),
                            _router = this._injector.get(Router);
                        _toaster.show({
                            message: exception.error && exception.error.message ? exception.error.message :
                                exception.statusText,
                            typeId: 'error',
                            isDismissable: true
                        });
                        _router.navigate(['']);
                        break;

                    case HttpError.TimeOut:
                        // Handled in AnalyticsExceptionHandler
                        console.error('%c TimeOut 408', logFormat);
                        break;

                    case HttpError.Forbidden:
                        console.error('%c Forbidden 403', logFormat);
                        const _authService = this._injector.get(AuthorizationService);
                        _authService.showForbiddenModal();
                        break;

                    case HttpError.InternalServerError:
                        console.error('%c big bad 500', logFormat);
                        break;
                }
            }
        });
}

}

また、インターセプターを@NgModuleプロバイダーに追加する必要があります。ここで、bootstrapアプリ：

    {
        provide: HTTP_INTERCEPTORS,
        useClass: ErrorInterceptor,
        multi: true
    },

必要に応じてコードを変更します-起動時-コンソールにログを記録するだけでした。このインターセプターを配置すると、HttpClientサービスを経由するすべてのバックエンド要求を処理します。

6
codeepic
call_http() {
    this.http.get<any>('/api/goes/here').pipe(
      map(res => this.result = res),
      catchError(err => do something with err)
    ).subscribe();
}

上記により、エラーをキャッチし、必要なことをすべて実行できるようになります。

1
Mike Tung
  err => {
    if(err.status==500)
    console.log(err)
  });

}

1
Black Panther