javascript - 在 ionic Framework 3.x 中哪里添加 REST API 消费功能？

Question

我已经有一段时间没有使用 ionic 框架了。上次，我使用的是版本 1，因此，我使用 ionic Creator 创建的每个页面都有一个 Controller ，我在其中添加了 js 代码来使用我的 REST 框架。

这次我下载了我的 ionic Creator 应用程序，目录结构完全改变了。没有像 angularJS 那样的 js Controller 。每个页面都有一个包含以下代码的 .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) {
  }

}

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

Answer 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 应注入(inject) (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 请求的页面中注入(inject)提供程序: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 应用程序的工作示例。