javascript - Angular HttpClient のオブザーバブル用デフォルトエラー関数

バックエンドでは、リクエストが失敗したときに、サーバーがクライアントにいくつかのエラーコードと一緒に適切なエラーメッセージを送信するような、良い例外処理の仕組みを作成しました。

こんな感じ：

@Getter
public class ErrorResponse {

    /**
     * Http Response status code
     */
    private final HttpStatus status;

    /**
     * General Error Message
     */
    private final String message;

    private final ErrorCode errorCode;

    private final Date timeStamp;
...
}

私は各失敗に対してデフォルトでユーザーにエラーメッセージを表示したいです。

私はHttpClientを拡張しようとしました

public get<T>(endPoint: string, options?: IRequestOptions): Observable<T> {
    return this.http.get<T>(this.API + endPoint, options);
  }

しかし、それはObservableを返しています

ページのほとんどで、私はこのようなことをしています。:

this.client.post(WebUtils.RESOURCE_HOST + '/api' + '/actor/create', formData
    ).subscribe(
      () => this.onSuccessfulPost(),
      error => {
        this.snack.error(error.error.message);
      }
    );

多くのページで、私は同じことを書いています:

error => {
            this.snack.error(error.error.message);
          }

私はHttpClientを拡張することについてのこの投稿を読みました。
しかし、それだけでは十分ではありません。これは単にdefaultの"API_HOST"を定義しているだけです。私はリクエストメソッドの戻り値がオブジェクトで、それらがObservablesである場合のデフォルトのエラー関数を定義したいです。

「HttpClient のリクエストメソッド」の戻りオブジェクトを拡張するような操作を行う方法はありますか？

回答 #1

そのために作られた新しいHTTPClientインターセプターを使用することができます。

こちらがその一例です：

export class ErrorHandlerService implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(req)
      .catch((err: HttpErrorResponse) => {
          console.log('error');
          // Mandatory return statement
          return Observable.throw(err);
        }
      );
  }

}

Angularによって行われるすべてのHTTPリクエストごとに、このインターセプターが実行され、あなたが指示した通りに動作します。この場合、それはエラーをログに記録しますが、あなたはそれに好きなことをさせることができます。

回答 #2

私が個人的にエラー処理を集中管理するために行っていることは、次の通りです：

私のサービスでは、catchError のようにして http リクエストを傍受します

return this.httpClient .get(...) .pipe( catchError(this.handleError.bind(this) );

エラー処理（私の場合、HTTPの返却ステータスと返り値に依存するログ記録）は、このように handleError メソッドで行われます:

private handleError(error: any) {
    error = error || {};
    if (error.status == 401 || error == 401 || error == 'Unauthorized') {
      ...
      this.logout();
    } else if (error.status == 403 || error == 403 || error == 'Forbidden') {
      ...
    } else if ((error.status == 423 || error == 423) && error._body) {
      ...
    } else if (error.status == 500) {
      ...
    } else {
      return this.processUnknownError(error);
    }
    return _throw(error);
  }

｀

私はまた、グローバルなnoop関数を宣言しました

export function noop() {}

すべてのサービス利用者が呼び出すように

this.dataService.getFoo().subscribe((values) => { ... }, noop);

その試みもあなたに適しているかもしれませんか？