前端应用都需要通过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.");
}
);