代码之家 › 专栏 › 技术社区 › JoeGeeky

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

angular

5

JoeGeeky · 技术社区 · 8 年前

查看 角度5+ 关于在服务中发出HTTP请求的指导我们看到服务的基本模式如下所示:

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、not found等,以便他们能够处理相关的UI问题

3 回复 | 直到 8 年前

1

3

Calidus 8 年前

最简单的方法就是使用observable中的错误对象。 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

2

3

Igor 8 年前

您的服务可以使用 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;
}

3

David Anthony Acosta 8 年前

我对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);
  }