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

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

imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(routes),
    IonicModule.forRoot(MyApp,{
      tabsHideOnSubPages: 'true' //隐藏全部子页面tabs
    })

  ],

在所需要的面引入http:

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

然后注入:

constructor(private http:Http) {}

不带参数的post

this.http.post(randomUserUrl)
   .map(res =>  res.json())
 .subscribe(function (data) {
   alert(JSON.stringify(data));
},err =>{
  console.error('ERROR', err);
});

不带参数的get

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

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

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

    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

  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);
  });

今天就介绍到这，谢谢

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

推荐阅读更多精彩内容