angular - ionic 3 中的 HTTP 问题

Question

我正在使用 ionic 3 制作一个应用程序，我想使用 HTTP 模块。我使用的是Ionic框架的官方文档。

链接:https://ionicframework.com/docs/native/http/

我执行了这些命令:

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http

到目前为止一切顺利。然后我将这个模块添加到我的 app.module.ts 文件中，代码如下所示:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';    
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ResultstatsPage } from '../pages/resultstats/resultstats';
import { HTTP } from '@ionic-native/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ResultstatsPage
  ],
  imports: [
    BrowserModule,   
    IonicModule.forRoot(MyApp),
    HTTP    
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ResultstatsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

我用这样的 HTTP 做了一个函数:

getStats(){
   this.http.get(this.url, {}, this.apikey)
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });
  }

当我使用 ionic serve 运行应用程序时出现错误(见屏幕截图)

我尝试了多种解决方案，但都没有解决问题。有人能指出我正确的方向吗？

Answer 1

根据这个:https://ionicframework.com/docs/native/http/

您不在 app.module.ts 中导入 import { HTTP } from '@ionic-native/http'; 而是在组件(或者更确切地说是服务) 这将进行 api 调用。

在 Angular 上等价于(3 个不同的文件)(在 app.module.ts 中)

 import {HttpClientModule} from '@angular/common/http';
 ...
 providers: [
    HttpClientModule,
    ...

在 api.service.ts 中:

import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpResponse} from '@angular/common/http';
...
getItems(): any{
  const apiURL = `${this.API_URL}/items`;
  this.items =
   this._http
    .get(apiURL)
    .catch(this.handleError);
  return this.items;
}

handleError(error: HttpErrorResponse) {
  console.log('an http get error happened.');
  console.error(error);
  let errorMessage;
  if (error.error instanceof Error) {
    errorMessage = `An error occurred: ${error.error.message}`;
  } else {
    errorMessage = `Server returned code: ${error.status}, error message is: ${error.message}`;
  }
  console.error(errorMessage);
  return errorMessage;
}

在 my.component.that.calls.api 中:

this.apiservice.getItems().subscribe(returnData => {
  if(returnData !== null && returnData !== undefined) if(returnData .length > 1){
    // do something with returnData 
    console.log(returnData);
  }
}, (error) => console.log(error), () => {});