Angular2 和 rxjs 'Catch' 运算符不起作用答案

【问题标题】：Angular2 and rxjs 'Catch' Operator not workingAngular2 和 rxjs 'Catch' 运算符不起作用
【发布时间】：2017-03-21 09:27:51
【问题描述】：

Plnkr Link With Working Code

我正在尝试将工作代码从 Plnkr 复制到我的机器上，但它在 VisualStudio 中显示错误。

目前我正在使用@angular "^2.4.5" 和rxjs "^5.2.0"

错误是说

'(error: any) => void' 类型的参数不能分配给'(err: any, catched: Observable) => ObservableInput' 类型的参数。

您可以在我的以下脚本中看到，我复制了与 Plnkr 代码完全相似的代码并导入了“catch”运算符。但是，它不起作用并在getStudentCourse2() 方法中显示上述错误。

如果我删除了 catch 运算符并像 getStudentCourse() 方法中的那样更改了代码，它可以工作并且我可以看到结果。

student.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';

@Injectable()
export class StudentService {
    private http: Http;            

    constructor(http: Http) {
        this.http = http;        
    }

    getStudentCourse(): Observable<IStudentCourse> {

        return this.http.get('/api/student/getstudentcourse').map(result => {
            return result.json() as IStudentCourse;
        }, error => console.log('Could not load data in service.'));

    }

    getStudentCourse2(): Observable<IStudentCourse> {

        return this.http.get('https://58cff77fe1a0d412002e446d.mockapi.io/api/student/getstudentcourse/2').map(result => {
            return result.json() as IStudentCourse;
        }).catch(error => console.log('Could not load data in service.'));

    }
}

export interface IStudentCourse {
    refNo: string;
    student: string;
    offeringName: string;
    offeringID: number;
}

我不知道为什么“Catch”运算符在我的代码中不能像“Plnkr”一样工作。你们能帮我解决这个问题吗？谢谢。

【问题讨论】：

你可以在 catch 操作符中创建一个 Observable 对象。例如看下面的代码：return this.http.get('58cff77fe1a0d412002e446d.mockapi.io/api/student/… => { return result.json() as IStudentCourse; })。 catch(error => Observable.throw('Could not load data in service.'));

标签： angular rxjs observable

【解决方案1】：

catch 运算符需要返回 Observable，但您返回的是 void，因为 console.log 始终返回 void。返回一个Observable，错误就会消失。

例如：

...
.catch(error => {
  console.log('something went wrong');
  return Observable.throw(new Error('throw a fancy new error'));
})

【讨论】：

【解决方案2】：

错误是这样说的； catch 运算符中的回调不返回任何内容。您可以在catch 运算符中抛出错误并在订阅时处理此错误；

getStudentCourse(){
     return this.http.get(parameters).map(handleData).catch(error => {
          Observable.throw(error);
     });
}

getStudentCourse().subscribe(successCallback, (error) => {
     // do whatever you want with this error
});

【讨论】：

【解决方案3】：

catch 需要返回 Observable 或 throw 的东西。当您返回一个可观察对象时，它将在您的订阅中输入成功方法。当你扔东西时，它会进入你的错误方法。检查我给你上一个问题的答案。 this plunker

【讨论】：

【解决方案4】：

你的问题来自于 catch 方法必须返回一个 Observable，但你的代码并没有真正返回一个 Observable。

您可以使用以下代码轻松解决此问题：

return this.http.get('https://58cff77fe1a0d412002e446d.mockapi.io/api/student/getstudentcourse/2').map(result => {
            return result.json() as IStudentCourse;
        }).catch(error => Observable.throw(error));

但是，我会建议另一种模式来解决这个问题，在我看来这实际上会使您的代码更清晰。

您可以使用 HandlException 方法轻松地创建一个 ExceptionService（例如），而不是使用 .catch 方法，然后将错误传递给该方法并在那里处理错误。

您的代码将如下所示：

return this.http.get('https://58cff77fe1a0d412002e446d.mockapi.io/api/student/getstudentcourse/2').map(result => {
                return result.json() as IStudentCourse;
            },
            error => this._exceptionService.HandleError(error));
)

（话说你在组件中注入了_exceptionService）

通过这种方式进行处理，您的代码会变得更简洁。

【讨论】：