可观察的.catch不是函数 [英] Observable .catch is not a function

问题描述

从Unix环境运行代码时，我得到了这个非常烦人的错误.当我通过ng serve在本地运行代码时，此方法工作正常，但是当我将代码部署到服务器时，此错误将暂停所有程序执行:

ERROR TypeError: this.http.get(...).catch is not a function

Google结果表明，我应该直接从其位置导入rxjs命名空间，而不是通过rxjs/Rx捆绑软件导入，但是无论如何我都会收到此错误.其他结果指出，我可能错过了导入rxjs运算符的步骤，但是我的案例中确实包含了它们.

我什至使用DevTools检查了随附的源地图，并且将操作符包含在浏览器中.

有人可以告诉我为什么我会收到此错误吗?我正在使用rxjs:^ 5.5.2

这是我的代码.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class MyService {
  constructor(private http: HttpClient) {}

  all(): Observable<any> {
    return this.http.get<any>('url')
      .catch(err => this.handleError(err));
  }
  handleError(error) {
    return Observable.throw(error);
  }
}

编辑 基于下面的@ Jota.Toledo的评论，我将使用此方法提供代码:

this.myService.all().subscribe(
  result => {
    this.isLoading = false;
    if (result) {
      this.clients = result;
    }
  },
  error => this.isLoading = false
);

是否在订阅中提供了两个回调函数，就像在添加运算符之前在某处使用catch方法"一样?

解决方案

在rxjs 5.5.2中，您可以使用lettable运算符(在本例中为catchError)解决此问题.您必须从operators导入它，例如:import { catchError } from 'rxjs/operators/catchError';.通常，必须以这种方式导入所有运算符，对于observable来说，就像observable/of一样.

import { catchError } from 'rxjs/operators/catchError';
import { map } from 'rxjs/operators/map';

all(): Observable<any> {
  return this.http.get<any>('url')
    .pipe(
        map(() => //do stuff),
        catchError((error: Error) => {
         //
        })
    )
}

在此处中了解更多信息. /p>

I get this very annoying error when running my code from a unix environment. This works fine when I run the code locally through ng serve, But when I deploy the code to my server, this error halts all program execution:

ERROR TypeError: this.http.get(...).catch is not a function

Google results state that I should import rxjs namespaces straight from their location, and not through the rxjs/Rx bundle, but I get this error regardless. Other results point out that I may have missed importing rxjs operators, but they are definitely included in my case.

I've even checked the included sourcemaps using DevTools, and the operators are included out to the browser.

Can anybody tell me why I'm getting this error? I'm using rxjs: ^5.5.2

This is my code.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class MyService {
  constructor(private http: HttpClient) {}

  all(): Observable<any> {
    return this.http.get<any>('url')
      .catch(err => this.handleError(err));
  }
  handleError(error) {
    return Observable.throw(error);
  }
}

EDIT Based on @Jota.Toledo's comment below, I will provide the code using this method:

this.myService.all().subscribe(
  result => {
    this.isLoading = false;
    if (result) {
      this.clients = result;
    }
  },
  error => this.isLoading = false
);

Is giving two callback functions in subscribe like this, the same as "using the catch method somewhere before the operator is added"?

解决方案

In rxjs 5.5.2 you can solve this problem using lettable operator, in this case, catchError. You have to import it from operators like: import { catchError } from 'rxjs/operators/catchError';. In general, all operators must be imported in this way, same thing goes for observable like observable/of.

import { catchError } from 'rxjs/operators/catchError';
import { map } from 'rxjs/operators/map';

all(): Observable<any> {
  return this.http.get<any>('url')
    .pipe(
        map(() => //do stuff),
        catchError((error: Error) => {
         //
        })
    )
}

Read more about lettable operators here.

这篇关于可观察的.catch不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！