ionic3的http请求

最近在学习用ionic3+angluar4混合开发app，今天需要获取一个静态json数据，试了很多遍，终于成功访问到了。

ionic的http请求有两种方式，一种是ionic带的Native的Http方法，另一种使用angluar的http请求。

第一种Native我没有试过，大家可以自己去试一下，https://ionicframework.com/docs/native/http/

今天我给大家讲一下第二种用angluar请求http

Angular的请求还分两种，一种是HttpClientModule请求，另一种是HttpModule请求。

HttpClientModule请求

官网文档：https://angular.io/tutorial/toh-pt6

import {HttpClientModule} from '@angular/common/http';

1.在app.module.ts中添加

import {HttpClientModule} from '@angular/common/http';

@NgModule({
...
  imports: [
    ...
    HttpModule,    
  ],
...
})
export class AppModule {}

2.在http请求的页面中  

​
……
import {HttpClient} from "@angular/common/http";
……

@IonicPage()

@Component({
  selector: '',
  templateUrl: ''
})

export class HomeSelectCityPage {

constructor(public navCtrl: NavController, public navParams: NavParams,
              
  private http: HttpClient){}


ionViewDidLoad() {

}

}

​

HttpModule请求

import { HttpModule } from '@angular/http';

同样的在app.module.ts中引入

import { HttpModule } from '@angular/http';

@NgModule({
……

imports: [

 HttpModule
]，

……

})

在http请求页面

……
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
……

export class HomeSelectCityPage {

constructor(public navCtrl: NavController, public navParams: NavParams,
              // public http: Http){}


}


 getHomeInfo(){
    this.http.get('assets/json/city.json')
      .toPromise().then(res=>{
        console.log(res);
    })
  }//这里获取的是本地的json

 ionViewDidLoad() {

    // 网络请求
    this.getHomeInfo();

}