如何在Angular 5+中处理HTTP响应码

Question

在查看有关使用服务进行HTTP请求的Angular 5+指南时，我们可以看到服务的基本模式如下：

getTasks(taskId: string): Observable<ITask[]> {
  var url = this.baseServiceUrl + 'task/' + taskId;

  this.fetchedTasks = this.http.get<ITask[]>(url);

  return this.fetchedTasks;
}

一个组件可以按照以下方式使用它。

getTasks(taskId: string): void {
  this.taskService.getTasks(taskId).subscribe(tasks => this.tasks = tasks);
}

使用上述案例，如何修改以允许我们处理HTTP响应代码，例如400、403、401、404和5xx。

简而言之，我们需要使调用者意识到故障结果与未找到等，并能处理相关的UI问题。

- JoeGeeky

---

您的服务可以使用 map 和 catch/catchError 将有意义的状态/数据返回给调用者（组件）。 - Igor

Answer 1

最简单的方法就是从observable中使用error对象。https://xgrommx.github.io/rx-book/content/getting_started_with_rxjs/creating_and_querying_observable_sequences/error_handling.html

getTasks(taskId: string): void {
  this.taskService.getTasks(taskId).subscribe(data => {
        this.tasks = data;
    },
    err => {
        //handle errors here
    });
}

您的其他选择包括在Angular中重载默认错误处理程序。

https://angular.io/api/core/ErrorHandler

- Calidus

Answer 2

您的服务可以使用catchError向调用者（组件）返回有意义的状态/数据。

import { catchError } from 'rxjs/operators/catchError';
import { _throw } from 'rxjs/observable/throw';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';


getTasks(taskId: string): Observable<ITask[]> {
  var url = this.baseServiceUrl + 'task/' + taskId;

  this.fetchedTasks = this.http.get<ITask[]>(url)
        .pipe(catchError((res: HttpErrorResponse ) => {
                if (res.status === 400) {
                    var someErrorTheCodeNeedsToReturn = something;
                    return _throw(someErrorTheCodeNeedsToReturn);
                }
                return _throw(res.status); // unknown / unexpected error, just rethrow status or do something custom
            }));
  return this.fetchedTasks;
}

- Igor

Answer 3

虽然我对observable不是完全确定，但我想它是类似的方式。我是这样做的：

public getAllInboxMessages(): Promise<Message[]> {
    return this.http.get<Message[]>(url)
        .toPromise()
        .catch(err => this.handleError(err));
}

  public handleError(error: any): Promise<never> {
    if (error.status === 401) {
      //
    } else if (error.status === 400) {
        //
      }
        return Promise.reject(error);
  }

- David Anthony Acosta