如何在 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。

简而言之，我们需要调用者了解错误结果、vs、未找到等，以便他们可以处理相关的 UI 问题

Answer 1

最简单的方法是仅使用可观察的错误对象。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