在 ionic framework 3.x 中在哪里添加 REST API 消费功能？答案

【问题标题】：Where to add REST API consuming functionality in ionic framework 3.x?在 ionic framework 3.x 中在哪里添加 REST API 消费功能？
【发布时间】：2017-12-01 17:01:27
【问题描述】：

我已经有一段时间没有使用 ionic 框架了。上次，我使用它是版本 1，因此，我使用 ionic creator 创建的每个页面都有一个控制器，用于添加 js 代码以使用我的 REST 框架。

这次我下载了我的 ionic creator 应用程序，目录结构完全改变了。没有像 angularJS 那样的 js 控制器。每个页面都有一个 .ts 文件，其中包含以下代码：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class page1Page {

  constructor(public navCtrl: NavController) {
  }

}

如果有人可以建议，有什么想法或在线教程吗？

【问题讨论】：

ionic 2 上面使用 angular >=2 和 typescript..not angularjs
angular.io/docs 在这里查看教程
你必须创建一个提供者：ionic g provider {NAME}

标签： javascript angular rest ionic-framework ionic3

【解决方案1】：

您需要创建提供程序来请求 REST API。发布示例：

您的提供商(rest-api.ts)

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


@Injectable()
export class RestApiProvider {

  private apiUrl = 'Your server api url';

    constructor(public http: Http) {
    console.log('Hello RestApiProvider Provider');
    }

    Login(dataparam){
        let param = 'your data params';
        return this.http.get(this.apiUrl+param)
                    .timeout(30000)
            .map(res => res.json())
            .catch(this.handleError);
      }


      handleError(error: any) {
        let errorMsg = error.message || 'Network Error ! Try again later.';
        return Observable.throw(errorMsg);
    }


}

Provider 应该被注入 (app.module.ts)

import { HttpModule,Http } from '@angular/http';
import { RestApiProvider } from '../providers/rest-api/rest-api';

@NgModule({
  declarations: [
    .....
  ],
  imports: [
  ........
    HttpModule,
    .......
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ......
  ],
  providers: [
    ......
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RestApiProvider,
    ......
  ]
})
export class AppModule {}

同时在页面中注入提供者，从那里你要进行 HTTP 请求：mobile-login.ts

import { RestApiProvider } from '../../providers/rest-api/rest-api';
..........

@IonicPage()
@Component({
  selector: 'page-mobile-login',
  templateUrl: 'mobile-login.html',
})
export class MobileLoginPage {

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public restProvider: RestApiProvider,
    ) {
  }

yourfunction{
    this.restProvider.Login(your comma seprate data param)
    .subscribe(
            (data: any) => {
                console.log(data)                    
            },
            (err) => {
                      console.log(err);
                    }
    );
}

以上是我的 Ionic 3 应用程序的工作示例。

【讨论】：