Angular：$ http 404错误处理（angular的http）

25-01-30 21

对于Angular：$http404错误处理感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解angular的http，并且为您提供关于Angular2http结果的正确错误处理、angula

对于Angular：$ http 404错误处理感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解angular的http，并且为您提供关于Angular 2 http结果的正确错误处理、angular 2 – http错误处理程序中的注入服务、Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http 请求结果类型转换与错误处理、Angular 4中HTTP错误的集中处理的宝贵知识。

本文目录一览：

Angular：$ http 404错误处理（angular的http）
Angular 2 http结果的正确错误处理
angular 2 – http错误处理程序中的注入服务
Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http 请求结果类型转换与错误处理
Angular 4中HTTP错误的集中处理

Angular：$ http 404错误处理（angular的http）

我有2 ng-包括HTML。考虑服务器中是否不存在ng-include
src之一。截至目前，它只会加载空白html，并且在浏览器控制台中会显示未找到http-404文件。

因此，在这种情况下，我只想将默认错误页面（服务器中存在）加载到该特定div中，即一半显示默认错误页面，另一部分显示通过nginclude加载的正确div。

我的逻辑是，使用HTTP拦截器拦截所有HTTP调用。无论何时发生404错误，我都想返回默认错误页面，该页面必须仅加载到div中。因此，这就像嘲笑正确的http调用，而是发送错误页面，我认为必须将其加载到正确的div。

但这没有发生:)。我尝试使用默认的window.load（’‘）。但随后，它会加载到页面顶部，并存在于各个页面中。

还是我应该捕获div id（如果是，怎么办？），然后tat id加载默认错误HTML吗？

需要您的考虑。

答案1

小编典典

要处理这种情况，您可以使用http拦截器（在此处找到文档：$
http）。

拦截器必须捕获404响应，从服务器加载404.html页面，并将其设置为初始响应的数据以及状态码200。

我创建了一个项目，展示了如何解决它。

仓库：https :
//github.com/matys84pl/angularjs-nginclude-
handling-404/

仔细看看main.js文件。

Angular 2 http结果的正确错误处理

参见英文答案 > Angular2 handling http response 3个
我一直在使用angular.io文档中使用的http错误处理策略：

getHeroes () {
    return this.http.get(this._heroesUrl)
                    .map(res => <Hero[]> res.json().data)
                    .catch(this.handleError);
    }
    private handleError (error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

在某些情况下,我将收到204状态代码(无数据),而不是JSON响应.在这种情况下,在通过res.json()解析结果失败之前不会调用错误处理程序,因此传递给handleError的错误是“error.json不是函数”.

如何查询响应流以检查200(OK)状态代码或响应头内容类型“application / json”,并通过更相关的错误消息发出错误处理程序的信号？

解决方法

http .get('Some Url') .map(res => { 
// If request fails,throw an Error that will be caught 
if(res.statu != 200) { 
throw new Error('This request has Failed ' + res.status); } // If everything went fine,return the response 
else {return res.json(); 
} })

这可能对你有所帮助.

这只是为了了解如何使用响应中的状态,您可以根据您的要求进行修改.

仅对非200代码抛出错误检查此commit

angular 2 – http错误处理程序中的注入服务

我有一个方法handleError(),如文档 https://angular.io/docs/ts/latest/guide/server-communication.html#!#error-handling中所示

private handleError(error: any) {
    console.error(error);
    console.log(this.loginService); // <- always undefined
    return Observable.throw(error);
}

我的问题是,this.loginService是未定义的,尽管它已在我的类中正确注入.它已经在其他方法中使用,但似乎在handleError中不可用.

http-catch调用方法的方式可能是问题吗？
如果是这样,我怎么能绕过那个？我需要在处理错误时执行一些逻辑.

这是一个关于如何将handleError方法设置为回调的示例(与文档完全相同)

this.http.get(url,ApiRequest.ACCEPT_JSON)
              .map(ApiHelper.extractData)
              .catch(this.handleError);

由于您直接传递函数,因此您没有类的此上下文.一个非常简单和最好的练习方法是使用lambda或“胖箭头函数”：

this.http.get(url,ApiRequest.ACCEPT_JSON)
    .map(res => ApiHelper.extractData(res))
    .catch(err => this.handleError(err));

关于何时使用lambdas的一个非常好的读物：https://stackoverflow.com/a/23045200/1961059

Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http 请求结果类型转换与错误处理

Http Get响应（Response）类型转换

接着上一节。
1。在浏览器控制台中可以看到响应的JSON对象有许多属性（properties）。如果试着用data.login访问login属性会报错。
console.log(data.login);
因为Get返回的是Object类型。
Angular get原型
typescript get(url: string,options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: 'body'; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: 'json'; withCredentials?: boolean; }): Observable<Object>;
2。转换响应的object对象为自定义对象：
2.1 自定义类型UserResponse :

import { Component,OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  results = '';

  constructor(private http: HttpClient){
  }
  ngOnInit(): void {
    this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(data => {
      //console.log(data);
      console.log("User Login: " + data.login);
      console.log("Bio: " + data.bio);
      console.log("Company: " + data.company);
    });
  }
}
interface UserResponse {
  login: string;
  bio: string;
  company: string;
}

错误处理

1。由于一些可预见或不可预见的状况，会导致 HTTP失败。因此应该总是有处理这些错误状况的代码存在。 Get的subscribe方法有两个参数未回调函数，用于处理Get成功与失败的情况。
subscribe方法原型

subscribe(next?: (value: T) => void,error?: (error: any) => void,complete?: () => void): Subscription;

失败处理

this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(
      data => {
        console.log("User Login: " + data.login);
        console.log("Bio: " + data.bio);
        console.log("Company: " + data.company);
      },//新增失败处理
      err => {
        console.log("Error occured.")
      }
    );

2。失败详细信息：错误处理回调函数参数类型是any，可将其转换为HttpErrorResponse类型，并可获取更多错误属性信息。 HttpErrorResponse 需要从@angular/common/http导入才能使用。
完整app.component.ts

import { Component,OnInit } from '@angular/core';

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

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  results = '';

  constructor(private http: HttpClient){
  }
  ngOnInit(): void {
    this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(data => {
      console.log(data);
      console.log("User Login: " + data.login);
      console.log("Bio: " + data.bio);
      console.log("Company: " + data.company);
    },(err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        console.log("Client-side error occured.");
      } else {
        console.log("Server-side error occured.");
      }
    }
  );
  }
}
interface UserResponse {
  login: string;
  bio: string;
  company: string;
}

Angular 4中HTTP错误的集中处理

我想告知用户HTTP请求是否失败,而不必为每个HTTP请求编写额外的代码.

我有角度2的工作原型：

@Injectable()
export class MyErrorHandler extends ErrorHandler {

  constructor() {
    super(false);
  }

  handleError(error: any) {
    this.tellUser(error);
    super.handleError(error);
  }

  tellUser(error: any) {
    // dig for the root cause
    if (error.rejection) {
      error = error.rejection;
    }
    if (error instanceof ViewWrappedError) {
       error = error.originalError;
    }

    let message;
    if (error instanceof Response) {
      // Todo: localize and display nicely
      const messages = {
        0: "Could not connect to server",}
      message = messages[error.status] || ("The server reported a system error (HTTP " + error.status + ")");
    } else {
      message = "A system error occurred.";
    }
    console.warn(message);
  }
}

但ViewWrappedError已被Angular 4替换为

export function viewWrappedDebugError(err: any,context: DebugContext): Error {
  if (!(err instanceof Error)) {
    // errors that are not Error instances don't have a stack,// so it is ok to wrap them into a new Error object...
    err = new Error(err.toString());
  }
  _addDebugContext(err,context);
  return err;
}

其中,由于在HttpResponse上调用toString,因此很难查询状态代码……

我希望angular能够为集中式错误处理提供一个公共的,支持良好的API.除了解析错误消息之外,真的没有办法集中处理HTTP错误吗？

更新：我更喜欢组件可以轻松覆盖集中式错误处理.

解决方法

另一种选择是简单地拥有一个委托给Http服务的服务,同时添加与API交互所需的任何自定义错误处理,调试逻辑,额外标题等.

然后,此服务成为您与Http相关的任何内容进行交互的集中点,因此您可以将错误处理集中在那里.在我开发的任何项目中,我总是创建这样一个类,因为几乎每个与之交互的API都有一些必须在每个请求中发生的常见配置(即使该配置与指定要使用的基本URL一样少).

这样一个类的例子：

export class ApiGateway {

  baseURL = "https://myapi.com";  // or sometimes pulled from another file
  constructor(private http: Http) { }

  get(path,params) {
    showLoadingIndicator();

    let headers = this.createMySpecialHeaders();
    let options = { headers: headers } // and whatever else you need to generalize
    let fullUrl = this.baseUrl + path + '?' + this.urlEncode(params)`;
    return this.get(path,params,options)
               .do(() => hideLoadingIndicator())
               .map(res => res.json())
               .catch(err => {
                    hideLoadingIndicator();
                  // show error message or whatever the app does with API errors etc
                  // sometimes rethrow the error,depending on the use case
                })
  }
}

对我来说,这是基本的OOP原则 – 在适配器类中包含与控件之外的事物的交互,以允许您对外部更改进行一些保护,并在必要时将该外部事物的API更改为您喜欢的内容.

如果有这样的类,例如,如果您升级到Angular 4并且接收错误的方法发生了变化,那么您只需要更改一个地方来处理新的错误技术.

我们今天的关于Angular：$ http 404错误处理和angular的http的分享就到这里，谢谢您的阅读，如果想了解更多关于Angular 2 http结果的正确错误处理、angular 2 – http错误处理程序中的注入服务、Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http 请求结果类型转换与错误处理、Angular 4中HTTP错误的集中处理的相关信息，可以在本站进行搜索。

本文标签：