如何正确捕获http.request()的异常？

Question

我的代码的一部分：

import {Injectable} from 'angular2/core';
import {Http, Headers, Request, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class myClass {

  constructor(protected http: Http) {}

  public myMethod() {
    let request = new Request({
      method: "GET",
      url: "http://my_url"
    });

    return this.http.request(request)
      .map(res => res.json())
      .catch(this.handleError); // Trouble line. 
                                // Without this line code works perfectly.
  }

  public handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }

}

myMethod()在浏览器控制台中产生异常：

原始异常：TypeError：this.http.request（...）.map（...）.catch不是函数

- Nick

Answer 1

也许你可以尝试在导入中添加这个：

import 'rxjs/add/operator/catch';

你还可以做以下事情：

return this.http.request(request)
  .map(res => res.json())
  .subscribe(
    data => console.log(data),
    err => console.log(err),
    () => console.log('yay')
  );

---

根据评论：

异常：TypeError: Observable_1.Observable.throw不是一个函数

同样，你可以使用以下方法来解决这个问题：

import 'rxjs/add/observable/throw';

- acdcjunior

---

谢谢你的帮助，它起作用了。之后我遇到了throw()函数的同样问题。我改为添加这一行代码 import 'rxjs/Rx';。现在所有的操作符都正常工作了。 - Nick

你模拟过错误来验证.catch是否真的起作用了吗？那个.subscribe()肯定是有效的。 - acdcjunior

是的，第二个问题是 EXCEPTION: TypeError: Observable_1.Observable.throw is not a function。可以通过 @MattScarpino 的答案或者我之前提到的这个 plunker 中的方法来解决：https://angular.io/resources/live-examples/server-communication/ts/plnkr.html - Nick

只需导入 throw 即可：import 'rxjs/add/observable/throw';，不要导入全部内容，因为太庞大了。 - dfsq

很棒的解决方案，非常有帮助。我可能要补充一下，(err) 的类型是 Response。 - Mohammed Suez

Answer 2

新服务已更新为使用HttpClientModule和RxJS v5.5.x：

import { Injectable }                    from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable }                    from 'rxjs/Observable';
import { catchError, tap }               from 'rxjs/operators';
import { SomeClassOrInterface}           from './interfaces';
import 'rxjs/add/observable/throw';

@Injectable() 
export class MyService {
    url = 'http://my_url';
    constructor(private _http:HttpClient) {}
    private handleError(operation: String) {
        return (err: any) => {
            let errMsg = `error in ${operation}() retrieving ${this.url}`;
            console.log(`${errMsg}:`, err)
            if(err instanceof HttpErrorResponse) {
                // you could extract more info about the error if you want, e.g.:
                console.log(`status: ${err.status}, ${err.statusText}`);
                // errMsg = ...
            }
            return Observable.throw(errMsg);
        }
    }
    // public API
    public getData() : Observable<SomeClassOrInterface> {
        // HttpClient.get() returns the body of the response as an untyped JSON object.
        // We specify the type as SomeClassOrInterfaceto get a typed result.
        return this._http.get<SomeClassOrInterface>(this.url)
            .pipe(
                tap(data => console.log('server data:', data)), 
                catchError(this.handleError('getData'))
            );
    }

---

旧服务，使用已弃用的HttpModule：

import {Injectable}              from 'angular2/core';
import {Http, Response, Request} from 'angular2/http';
import {Observable}              from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
//import 'rxjs/Rx';  // use this line if you want to be lazy, otherwise:
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';  // debug
import 'rxjs/add/operator/catch';

@Injectable()
export class MyService {
    constructor(private _http:Http) {}
    private _serverError(err: any) {
        console.log('sever error:', err);  // debug
        if(err instanceof Response) {
          return Observable.throw(err.json().error || 'backend server error');
          // if you're using lite-server, use the following line
          // instead of the line above:
          //return Observable.throw(err.text() || 'backend server error');
        }
        return Observable.throw(err || 'backend server error');
    }
    private _request = new Request({
        method: "GET",
        // change url to "./data/data.junk" to generate an error
        url: "./data/data.json"
    });
    // public API
    public getData() {
        return this._http.request(this._request)
          // modify file data.json to contain invalid JSON to have .json() raise an error
          .map(res => res.json())  // could raise an error if invalid JSON
          .do(data => console.log('server data:', data))  // debug
          .catch(this._serverError);
    }
}

我使用.do()（现在使用的是.tap()）进行调试。

当服务器出现错误时，我从使用的服务器（lite-server）获取的Response对象的body仅包含文本，因此我使用err.text()而不是err.json().error。您可能需要根据您的服务器调整该行代码。

如果res.json()引发错误，因为它无法解析JSON数据，则_serverError将不会得到Response对象，因此需要进行instanceof检查。

在这个plunker中，将url更改为./data/data.junk以生成错误。

---

两种服务的用户都应该有能够处理错误的代码:

@Component({
    selector: 'my-app',
    template: '<div>{{data}}</div> 
       <div>{{errorMsg}}</div>`
})
export class AppComponent {
    errorMsg: string;
    constructor(private _myService: MyService ) {}
    ngOnInit() {
        this._myService.getData()
            .subscribe(
                data => this.data = data,
                err  => this.errorMsg = <any>err
            );
    }
}

- Mark Rajcok

Answer 3

有几种方法可以做到这一点。两种方法都非常简单。每个示例都很好用。您可以将其复制到您的项目中并进行测试。

第一种方法更可取，第二种方法有点过时，但目前仍然有效。

1）解决方案1

// File - app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ProductService } from './product.service';
import { ProductModule } from './product.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [ProductService, ProductModule],
  bootstrap: [AppComponent]
})
export class AppModule { }



// File - product.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// Importing rxjs
import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';
import { catchError, tap } from 'rxjs/operators'; // Important! Be sure to connect operators

// There may be your any object. For example, we will have a product object
import { ProductModule } from './product.module';

@Injectable()
export class ProductService{
    // Initialize the properties.
    constructor(private http: HttpClient, private product: ProductModule){}

    // If there are no errors, then the object will be returned with the product data.
    // And if there are errors, we will get into catchError and catch them.
    getProducts(): Observable<ProductModule[]>{
        const url = 'YOUR URL HERE';
        return this.http.get<ProductModule[]>(url).pipe(
            tap((data: any) => {
                console.log(data);
            }),
            catchError((err) => {
                throw 'Error in source. Details: ' + err; // Use console.log(err) for detail
            })
        );
    }
}

2) 解决方案2：这是一种老方法，但仍然有效。

// File - app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ProductService } from './product.service';
import { ProductModule } from './product.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [ProductService, ProductModule],
  bootstrap: [AppComponent]
})
export class AppModule { }



// File - product.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

// Importing rxjs
import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class ProductService{
    // Initialize the properties.
    constructor(private http: Http){}

    // If there are no errors, then the object will be returned with the product data.
    // And if there are errors, we will to into catch section and catch error.
    getProducts(){
        const url = '';
        return this.http.get(url).map(
            (response: Response) => {
                const data = response.json();
                console.log(data);
                return data;
            }
        ).catch(
            (error: Response) => {
                console.log(error);
                return Observable.throw(error);
            }
        );
    }
}

- Victor Isaikin

Answer 4

RxJS 函数需要特定地导入。一个简单的方法是使用import * as Rx from "rxjs/Rx"导入其所有功能。

然后确保作为Rx.Observable访问Observable类。

- MatthewScarpino

---

Rxjs是一个非常大的文件，如果您导入它的所有功能，会增加页面加载时间。 - Soumya Gangamwar

如果你只需要一个或两个操作符，就不应该从Rxjs中导入所有内容。 - marcel-k

Answer 5

在最新的Angular 4版本中使用

import { Observable } from 'rxjs/Rx'

它会导入所有必需的东西。

- Munish Sharma

---

不要这样做，它会导入整个 Rxjs 库。 - marcel-k

因此，这将导致打包大小增加！ - Tushar Walzade