离子：this.http.get(...).map 不是函数

Posted 2023-03-13

【中文标题】离子：this.http.get(...).map 不是函数

【英文标题】：Ionic : this.http.get(...).map is not a function

【发布时间】：2019-01-25 21:37:11

【问题描述】：

在我下面的 Ionic 3 代码摘录中， 即使为 map 的 rxjs 运算符添加了所有导入，问题仍然存在。

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

离子：

离子（离子 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

科尔多瓦：

科尔多瓦（科尔多瓦 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

即使这个问题之前已经在 *** 上讨论过并解决了，但没有一个对我有用。

任何帮助将不胜感激！

【问题讨论】：

如果您使用的是 rxjs6，则 map 不再作为 Observable 上的函数存在，您现在必须将 lettable 运算符与 pipe 一起使用

Rxjs 的当前版本是 5.2.11。我也尝试使用 .pipe() 但收到的错误是 TypeError: this.http.get(...).pipe is not a function

【参考方案1】：

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

为了从 Promise (RxJS 5) 创建 Observable，只需使用：

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 可能配置不正确，这种类型的错误应该立即出现（标记为红色）。

【讨论】：

IDE 错误：../node_modules/rxjs/Rx 没有导出成员 'from'

对不起，我只是看到你在 Rxjs 5.2 上运行。尝试使用 Rx.Observable.fromPromise() 我将编辑帖子

运行时错误：TypeError: Cannot read property 'get' of undefined

代码 sn-p 不是您代码的完整版本，我将在编辑中添加完整版本 ;-)

嗯，对不起，我需要完整的代码才能弄清楚。无论如何，我认为你的问题得到了回答，只是暗示你得到了一个 Promise，而不是一个 Observable。您需要自己解决其余的问题；-)

【参考方案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)
  )

【讨论】：

我也尝试使用 .pipe() 但收到的错误是 TypeError: this.http.get(...).pipe is not a function跨度>

升级 Rxjs 版本 npm install rxjs-compat

【参考方案3】：

Ionic http.get 正在返回承诺。与 angular httpClient.get 不同（以 observable 形式返回），因此您有 3 个选项来解决此问题。

更改您的代码以使用承诺

this.http .get(this.getMethodUrl) .then(this.extractResponse) // change to .then ...

将您的 ionic http 服务替换为 angular httpClient.get。不知道你为什么不首先使用httpClient.get。

使用fromPromise 将promise 转换为可观察的，就像@ggradnig 提到的那样。但是，建议您使用选项 2。

【讨论】：

我尝试了选项 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]:

因为你需要将 httpClientModule 导入到你的 ngmodule app.module.ts。您需要了解 Angular 工作原理的基础知识。不可能写下每个步骤供您遵循。