离子：this.http.get（...）.map不是一个函数。

Question

在我的Ionic 3代码中，即使添加了所有rxjs操作符map的导入，问题仍然存在。

TypeError: this.http.get(...).map不是一个函数

我的导入和代码如下：

import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/Rx";
import { Injectable } from "@angular/core";
import { HTTP } from "@ionic-native/http";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";

public method(): Observable<any> {
return this.http
  .get(this.getMethodUrl)
  .map(this.extractResponse)
  .catch(this.handleError);
}

RxJs版本 : 5.2.11 Ionic: ionic (Ionic CLI)版本: 4.0.0 (C:\Users\Genesis-PC\AppData\Roaming\npm\node_modules\ionic) IonicFramework : ionic-angular 3.9.2 @ionic/app-scripts : 3.1.11 Cordova: cordova (Cordova CLI)版本: 8.0.0 Cordova平台 : android 7.1.1 系统: NodeJS版本: v8.11.4 (C:\Program Files\nodejs\node.exe) npm :6.4.0 操作系统 : Windows 10

即使在StackOverflow上之前已经讨论并解决了这个问题，但是对我来说都无法解决。

非常感谢您的帮助！

- Karan Ginimav

---

如果您正在使用rxjs6，则map不再作为Observable上的函数存在，现在必须使用带有pipe的可让操作符。 - user184994

Rxjs 的当前版本为 5.2.11。我尝试使用 .pipe()，但是我收到的错误是 TypeError: this.http.get(...).pipe 不是一个函数。 - Karan Ginimav

Answer 1

根据官方Ionic文档(https://ionicframework.com/docs/native/http/)，HTTP.get的返回类型是Promise<HTTPResponse>而不是Observable。因此，您不能在该类型上使用Observable运算符。

为了从Promise创建一个Observable（RxJS 5），只需使用：

import { Observable } from 'rxjs/Observable';
let httpResult$ =  Observable.fromPromise(this.http.get(this.getMethodUrl));

这是您使用Observable的代码：

import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/Rx";
import { Injectable } from "@angular/core";
import { HTTP } from "@ionic-native/http";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";

public method(): Observable<any> {
return Observable.fromPromise(this.http
  .get(this.getMethodUrl))
  .map(this.extractResponse)
  .catch(this.handleError);
}

对于 RxJS 6+，请使用新的 from 操作符：

import { from } from 'rxjs';
let httpResult$ =  from(this.http.get(this.getMethodUrl));

注意：您的IDE可能没有正确配置，这种类型错误应该立即出现（标为红色）。

- ggradnig

---

IDE错误：**../node_modules/rxjs/Rx没有导出成员'from'**。 - Karan Ginimav

抱歉，我刚看到你正在使用 Rxjs 5.2。尝试使用 Rx.Observable.fromPromise()。我会编辑帖子。 - ggradnig

运行时错误：TypeError：无法读取未定义的属性“get”。 - Karan Ginimav

代码片段不是您的完整代码版本，我会在编辑中添加完整的代码；-) - ggradnig

在实现您的代码片段后，我遇到了空白的运行时错误。 - Karan Ginimav

嗯，抱歉，我需要完整的代码才能弄清楚。不管怎样，我认为你的问题只需要提示就可以得到答案，你得到的是一个Promise而不是Observable。你需要自己解决剩下的部分；-) - ggradnig

Answer 2

如果您正在使用RXJS 6，请使用pipe

import { Observable } from "rxjs";
import { map,catchError } from "rxjs/operators";

public method(): Observable<any> {
return this.http
  .get(this.getMethodUrl)
  .pipe(
     map(this.extractResponse),
     catchError(this.handleError)
  )
}

- Krishna Rathore

---

我也尝试使用 .pipe()，但是我收到的错误是 TypeError: this.http.get(...).pipe 不是一个函数。 - Karan Ginimav

升级 Rxjs 版本 npm install rxjs-compat - Krishna Rathore

Answer 3

Ionic的http.get返回的是Promise。与Angular的httpClient.get（返回为Observable）不同，因此您有三个选项来解决这个问题。

1. 更改您的代码以使用Promise

   this.http .get(this.getMethodUrl) .then(this.extractResponse) // 更改为.then ...

2. 将您的Ionic http服务替换为Angular的httpClient.get。不确定为什么您一开始没有使用httpClient.get。

3. 通过使用fromPromise将Promise转换为Observable，就像@ggradnig提到的那样。但是，建议您选择第二个选项。

- Jecfish

---

我尝试了选项2，但在Ionic中出现了以下错误：ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[Http -> ConnectionBackend]: StaticInjectorError(Platform: core)[Http -> ConnectionBackend]: NullInjectorError: No provider for ConnectionBackend! Error: StaticInjectorError(AppModule)[Http -> ConnectionBackend]: StaticInjectorError(Platform: core)[Http -> ConnectionBackend]: - Karan Ginimav

因为您需要将httpClientModule导入到ngmodule“app.module.ts”中。 您需要了解Angular的基本工作原理。 不可能为您列出每个步骤以供遵循。 - Jecfish