如何在可观察的请求Angular中处理404答案

【问题标题】：How to handle 404s in an observable request Angular如何在可观察的请求Angular中处理404
【发布时间】：2017-11-18 00:45:08
【问题描述】：

我正在尝试解决的问题：我在控制台中找不到很多 404，我想处理这些。

我的 Angular 代码中有这两种方法：

getUserByEmailAddress(email: string): Observable<User> {
    return this._http.get<User>("http://webapi.local/api/v2.0/users?email=" + email);
}


isEmailAddressAvailable(email: string) {
    var user: User;
    var response = this.getUserByEmailAddress(email);
    response.subscribe(
       usr => user == usr,
       error => user == undefined);
  if (user === undefined) {
  return true;
  }
  else {
  return false;
  }
}

这按预期工作，当您调用端点时，如果未找到用户，则返回 404 未找到。

我要做什么

我想在 getUserByEmailAddress() 中的 .get() 请求中添加一个 .catch() 来处理这些 404 并屏蔽它们出现在控制台中，但是当我尝试添加它时，我不明白是什么我需要返回可观察的，我已经尝试过：

.catch(err => { return Observable.of(undefined)})

但我认为这不太对。

感谢您的帮助！

【问题讨论】：

您正试图阻止它出现在控制台中？如果是这样，我认为这是可能的
@RahulSingh，是的，我想阻止它显示在控制台中
itg 将出现在控制台中，这是您无法禁用的浏览器功能，您可能有一个拦截器，但我觉得它仍会出现在控制台中，我不确定 100% 但是，你可以试试拦截器

标签： angular observable

【解决方案1】：

为了处理我的应用程序中的 404 错误，我所做的是在 catch 块中

  if(err.status == 404)
         return  Observable.throw(new NotFoundError()) 
   else 
          return Observable.throw(new AppError(err))

但首先您必须创建两个名为 AppError 的类，它们将分配给所有错误，而 notfoundError 将分配给 404 错误，这将是 AppError 的一个实例 IN apperror.ts

export class AppError {
    constructor(public err?:any){
        console.log(err);
       }
}

在 notFound.ts 中

import { AppError } from "./apperror";

export class NotFoundError extends AppError {

}

然后在订阅中你可以像这样处理这些错误

response.subscribe(
       usr => user == usr,
      ((err:Error)=>{
        if(err instanceof NotFoundError){
          alert(err)
        }
      })

【讨论】：

【解决方案2】：

您可以继续使用 map 或 do 方法来检查状态代码。

    getUserByEmailAddress(email: string): Observable<User> {
        return this._http.get<User>("http://webapi.local/api/v2.0/users?email=" + email).map(res => {
            if(res.status ==404) {
               throw new Error('This request has failed ' + res.status);
            } 
           else {
              return res.json();
          }
   }).catch(err =>  { 
      //custom logic goes here
      return Observable.throw(err); 
      });
    }

sn-p with 'do'

getUserByEmailAddress(email: string): Observable<User> {
    return this._http.get<User>("http://webapi.local/api/v2.0/users?email=" + email).do(res => {
    if(res.status ==404) {
     //custom logic goes here
    }
});

【讨论】：

【解决方案3】：

我认为最好的解决方案是 http 拦截器。然后您可以检查请求的响应是否为 404 return Observable.empty()

https://angular.io/guide/http#logging

【讨论】：

谢谢，我将如何实现这个，我不知道如何形成文档