发表于: 2019-07-04 21:26:32
1 915
HttpClient Get请求。今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
- 明天计划的事情:(一定要写非常细致的内容)
遇到的问题:(遇到什么困难,怎么解决的)
收获:(通过今天的学习,学到了什么知识)
- 明天计划的事情:(一定要写非常细致的内容)
- HTTP GET 请求参数: HttpParams
- 请求第1页,最大条数2:
- url方式
http://127.0.0.1:3000/customers?_page=1&_limit=1
- 使用httpClient实现
- 导入HttpParams
import {HttpParams} from "@angular/common/http";
- 构建一个 HttpParams 对象
const params = new HttpParams().set('_page', "1").set('_limit', "1");
- 呼叫 .get() 方法并携带参数,然后将返回的 Observable 对象分配给customersObservable。(params 要与get在同一个方法中)
this.customersObservable = this.httpClient.get("http://127.0.0.1:3000/customers", {params});
- 使用更简单的方法新建HttpParams对象:【fromString】
const params = new HttpParams({fromString: '_page=1&_limit=1'});
- 导入HttpParams
- 带参Get请求(记url QueryString)
const params = new HttpParams({fromString: '_page=1&_limit=1'});
this.customersObservable = this.http
.request("GET","http://127.0.0.1:3000/customers",
{
responseType:"json",
params
});
- url方式
- 请求第1页,最大条数2:
- 添加 HTTP Headers
- 导入HttpHeaders
import { HttpHeaders } from '@angular/common/http';
- 新建客制的HttpHeader对象
const headers = new HttpHeaders().set("X-CustomHttpHeader", "CUSTOM_VALUE");
- 发送带httpHeader的请求
const headers = new HttpHeaders().set("X-CustomHttpHeader", "CUSTOM_VALUE");
this.customersObservable = this.httpClient.get("http://127.0.0.1:3000/customers", {headers}); - 携带httpHeader,会出现重复请求的状况,第一次Option请求 204状态(Firefox 为Option请求方法),第二次为返回的结果。
- 导入HttpHeaders
- 发送HTTP PUT 请求
HTTP PUT 方法用来完全替换 API server上的资源。用HttpClient 发送PUT 请求替换Customers上id为1的资源:
this.httpClient.put("http://127.0.0.1:3000/customers/1",
{
"name": "NewCustomer001",
"email": "newcustomer001@email.com",
"tel": "0000252525"
})
.subscribe(
data => {
console.log("PUT Request is successful ", data);
},
error => {
console.log("Rrror", error);
}
); - 发送HTTP PATCH 请求
HTTP PATCH 用来更新API server上的资源。this.httpClient.patch("http://127.0.0.1:3000/customers/1",
{
"email": "newcustomer001@gmail.com"
})
.subscribe(
data => {
console.log("PUT Request is successful ", data);
},
error => {
console.log("Error", error);
}
); - 发送HTTP DELETE 请求
HTTP DELETE 用来删除 API server上的资源this.httpClient.delete("http://127.0.0.1:3000/customers/1")
.subscribe(
data => {
console.log("DELETE Request is successful ", data);
},
error => {
console.log("Error", error);
}
); - 发送 HTTP POST 请求
HTTP POST 方法有很多用途,大多数是用来在API server上新增一笔数据。this.httpClient.post("http://127.0.0.1:3000/customers",
{
"name": "Customer004",
"email": "customer004@email.com",
"tel": "0000252525"
})
.subscribe(
data => {
console.log("POST Request is successful ", data);
},
error => {
console.log("Error", error);
}
);
评论