angular 6 HttpClient 请求数据方式总结

前端应用都需要通过HTTP协议与后端进行服务通，目前浏览器主要支持两种API通讯：XMLHttpRequest 接口和 fetch() API。而anluar最新提供的HttpClient是基于XMLHttpRequest 提供的接口。

---

老版本方式：

之前的方式，以http和jsonp为例，如果需要使用，则需要在app.module.ts 中导入对应的模块，并且要声明。然后再在对应的服务里面引用声明。

导入

声明

导入

实例化

---

新版:

直接在app.model.ts引用一个文件就行:

导入

调用

---

需要注意的是，现在JSON是默认的数据格式，不需要像之前一样使用如下的代码：

http.get(url).map(res => res.json()).subscribe(...)

get请求现在直接使用:

http.get(url).subscribe(...)

使用get方法请求数据时候，当需要拼接参数的时候：预期URL:

https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10

我们可以直接在 链接后面拼参数传输，也可以使用HttpParams 对象 传参。

使用HttpParams时：

import{ HttpClient, HttpParams }from"@angular/common/http";

三种不同的方式

const params =newHttpParams().set("_page","1").set("_limit","10");//方式一：链式语法，set不能分开写

const params =newHttpParams({fromString:"_page=1&_limit=10"});//方式二：使用 fromString

const params =newHttpParams({ fromObject: { _page:"1", _limit:"10"} });//方式三：使用 fromObject

http.get(url,{params}).subscribe(...)

post请求：

import{ HttpClient, HttpParams, HttpHeaders }from"@angular/common/http";

const headers =newHttpHeaders().set("Content-type","application/json; charset=UTF-8");

this.http.post("https://jsonplaceholder.typicode.com/todos", {userId:1,title:"learn ionic 4",completed:false  },  { headers } )  .subscribe( val =>  {

                                       console.log("Post call successful value returned in body", val);

                                         },    error => {

                                    console.log("Post call in error", error);

                                      }, () => {

                                 console.log("The Post observable is now completed.");

                                  }

                        );