javascript - 在ionic框架3.x的何处添加REST API消耗功能？

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

这次我下载了我的离子创作器应用程序，目录结构已完全更改。没有像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) {
  }

}

如果有人可以提出任何想法或在线教程？

最佳答案

您需要创建提供程序来请求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);
    }


}

提供者应注入（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 App的工作示例。