转载自:https://www.cnblogs.com/acm-bingzi/p/ionic3http.html
Ionic的http请求方法,一种是使用Ionic的Native的Http方法,另一种是使用Angular的Http请求方法。
第一种真的是看着文档都实现不了,很奇怪的错(官网文档:https://ionicframework.com/docs/native/http/),不知道缺少了什么,这种方式就先不研究了
第二种Angular的请求方法又有两种,一种是使用HttpModule 的方式,现在网上大多数的介绍都是如此,但是在新版本中这种方法已经不推荐了,推荐的是另一种使用HttpClientModule 方式
HttpModule方式
import { HttpModule } from ‘@angular/http’;
在app.module.ts 文件中添加
...
import { HttpProvider } from '../providers/http/http';
import { HttpModule } from '@angular/http';
@NgModule({
...
imports: [
...
HttpModule,
],
...
providers: [
...
HttpProvider
]
})
export class AppModule {}
在http.ts文件中
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class HttpProvider {
path: string = 'https://randomuser.me/api/?results=25';
constructor(public http: Http) {
console.log('Hello HttpProvider Provider');
}
loadUsers(){
return this.http.get(this.path).map(res => res.json(), err => {
console.log(err);
})
}
}
在调用HTTP请求的页面中 test.ts
import {Component} from '@angular/core';
import {HttpProvider} from "../../providers/http/http";
@Component({
selector: 'page-test',
templateUrl: 'test.html',
})
export class TestPage {
constructor(public http: HttpProvider) {
}
f(){
this.http.loadUsers().subscribe(res => {
console.log(res.results);
},
err => {
console.log(err);
});
}
}
但是在新版的angular中,已经不推荐使用这种方法了
// import { Http } from '@angular/http';
// import { HttpModule } from '@angular/http';
HttpClientModule方式
官网文档:https://angular.io/tutorial/toh-pt6
这种方法不但推荐,而且使用起来非常简单
import { HttpClientModule } from ‘@angular/common/http’;
在app.module.ts 文件中添加
...
import {HttpClientModule} from '@angular/common/http';
@NgModule({
...
imports: [
...
HttpClientModule,
],
...
})
在调用HTTP请求的页面中 test.ts
import {Component} from '@angular/core';
import {HttpClient} from "@angular/common/http";
@Component({
selector: 'page-test',
templateUrl: 'test.html',
})
export class TestPage {
path: string = 'https://randomuser.me/api/?results=25';
constructor(private http: HttpClient) {
}
f(){
this.http.get(this.path)
.subscribe(data => {
console.log(data);
});
}
}