如何从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不是函数

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';

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()

当发生服务器错误时，我从正在使用的服务器（精简服务器）获取body的Response对象的内容仅包含文本，因此我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

            );

    }

}