Angular4基本网络请求get、post方式

Posted on | Edited on | In

angular2的网络请求和4还是有很大区别的，写一个项目的话肯定会用到http服务，除非你都是静态页，这只是一个最基本的、深入的拓展即可，希望能够帮助大家吧，谢谢
首先如果你想用这个服务、那么你需要在app.module.ts中引入如下：

1
2
3
4
5
6
7
8
9
imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot(routes),
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages: 'true' //隐藏全部子页面tabs
})

],

在所需要的面引入http:

1
import {Http, ResponseOptions,Headers,HttpModule,URLSearchParams} from "@angular/http";

然后注入:

1
constructor(private http:Http) {}

不带参数的post

1
2
3
4
5
6
7
this.http.post(randomUserUrl)
.map(res =>  res.json())
.subscribe(function (data) {
alert(JSON.stringify(data));
},err =>{
console.error('ERROR', err);
});

不带参数的get

1
2
3
4
5
6
7
this.http.get(randomUserUrl)
.map(res => res.json()) // (5)
.subscribe(data => {
alert(JSON.stringify(data));
},err =>{
console.error('ERROR', err);
});

带参数的⚠️注意post与get传参数方式不一样！

带参数的post, 注意一定要引入 URLSearchParams，要不请求是失败的: 

1
2
3
4
5
6
7
8
9
10
let  d1 = new URLSearchParams();
d1.append('key',   'value' );
d1.append('key',   'value' );
d1.append('key',   ‘value’);
this.http.post(randomUserUrl,d1)
.map(res =>  res.json())
.subscribe(function (data) {

alert(JSON.stringify(data));
});

带参数的get

1
2
3
4
5
6
7
8
9
10
let dates ={
放参数keyvalue
};
this.http.get(randomUserUrl,{params: dataes})
.map(res => res.json()) // (5)
.subscribe(data => {
alert(JSON.stringify(data));
},err =>{
console.error('ERROR', err);
});

今天就介绍到这，谢谢