时间戳

首页 > 解决方案 > RXJS Angular - 使用 .subscribe 和 Observable 处理错误

typescript - RXJS Angular - 使用 .subscribe 和 Observable 处理错误

问题描述

我有一个后端 api 来创建新产品。前端 Angular 代码需要调用后端 API。如何使用 ** .subscribe** 进行错误处理。我正在使用HTTPClient并使用Observable并一直在阅读有关 RXJS 如何利用错误处理的信息，

应用程序应将其称为 Observable 和 .subscribe()。

api /create 应该处理成功和失败（错误） - 如果 API 返回 200：它应该打印成功 - 如果 API 返回 400，应该抛出错误

伪代码

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

ID = 'foo';
            this.http.post('/api/create', {
                productName: this.form.value.productName,
                productValue: this.form.value.productValue,
            }).subscribe(
                resp => this.onSubmitSuccess(resp), err => this.onSubmitFailure(err)
            );


private onSubmitSuccess(resp) {
        console.log(resp);
        this.ID = resp.ID;
        this.submitSuccess = true;
        this.submitFailed = false;
    }

    private onSubmitFailure(resp) {
        console.log(resp);
        this.submitFailed = true;
        this.submitSuccess = false;
    }  ```

标签： typescripterror-handlingrxjshttpclientrxjs-observables

解决方案

处理请求错误。这是官方的 Angular 文档

getConfig() {
  return this.http.get<Config>(this.configUrl)
    .pipe(
      catchError(this.handleError)
    );
}

private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.error('An error occurred:', error.error.message);
  } else {
    // The backend returned an unsuccessful response code.
    // The response body may contain clues as to what went wrong,
    console.error(
      `Backend returned code ${error.status}, ` +
      `body was: ${error.error}`);
  }
  // return an observable with a user-facing error message
  return throwError(
    'Something bad happened; please try again later.');
};

推荐阅读