Getting Started With Angular 4.3+ HttpClient
将已有的项目添加到github
创建RESTAPI神器-JsonServer
Angular-cli新建httpClientExample项目
ng new httpClientExample
ngModule中导入HttpClientModule
.... import { HttpClientModule } from '@angular/common/http'; .... @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }typescript
npm安装json-server,代替api server提供API服务。(windows命令行提示符(管理员))
npm install -g json-server
新建一各 JSON 文件,扮演我们的服务器上的数据库。
{"customers": [{"id": 1,"name": "Customer001","email": "customer001@","tel": "0526252525"},{"id": 2,"name": "Customer002","email": "customer002@","tel": "0527252525"},{"id": 3,"name": "Customer003","email": "customer003@","tel": "0528252525"}]}
启动服务。现在可像用Rest service进行查询, json-server更多使用点击这里.
json-server --watch E:\db.json
HttpClient Get请求。
导入HttpClient , @angular/common/httpcomponent 构造函数中注入HttpClient 使用.get(端点)方法创建HTTP GET请求
订阅(Subscribe )返回的observable并显示结果
import { Component,OnInit } from '@angular/core';//OnInit 接口,要求实现OnInit方法。import { Observable } from "rxjs/Observable";//addimport { HttpClient, } from "@angular/common/http";/addclass Customer {id : number;name: string;email: string;tel: string;} @Component({selector: 'customers',template: `<ul *ngIf="customersObservable | async as customers else empty"><li *ngFor="let customer of customers">{{customer|json}}</li> </ul>`}) export class AppComponent implements OnInit {customersObservable : Observable<Customer[]>; title = 'app';constructor(private httpClient:HttpClient) {}ngOnInit() {//初始化时就开始get请求数据this.customersObservable = this.httpClient.get<Customer[]>("127.0.0.1:3000/customers");}}
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'});
带参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 });
添加 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请求方法),第二次为返回的结果。发送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@", "tel": "0000252525" }) .subscribe( data => { console.log("PUT Request is successful ", data); }, error => { console.log("Rrror", error); } );
发送HTTP PATCH 请求
HTTP PATCH 用来更新API server上的资源。
{ "email": "newcustomer001@" }) .subscribe( data => { console.log("PUT Request is successful ", data); }, error => { console.log("Error", error); } );this.httpClient.patch("http://127.0.0.1:3000/customers/1",
发送HTTP DELETE 请求
HTTP DELETE 用来删除 API server上的资源
.subscribe( data => { console.log("DELETE Request is successful ", data); }, error => { console.log("Error", error); } );this.httpClient.delete("http://127.0.0.1:3000/customers/1")
发送 HTTP POST 请求
HTTP POST 方法有很多用途,大多数是用来在API server上新增一笔数据。
{ "name": "Customer004", "email": "customer004@", "tel": "0000252525" }) .subscribe( data => { console.log("POST Request is successful ", data); }, error => { console.log("Error", error); } );this.httpClient.post("http://127.0.0.1:3000/customers",
本地项目上传到GitHub
先从github创建一个空的仓库先从github创建一个空的仓库,并复制链接地址
复制repo链接
初始化本地仓库,并提交内容到本地
如果没说明文档,如需,新建
touch README.md
本地项目若未初始化,则初始化
git init
添加全部已经修改的文件。
git add .
等同git add -A
提交到本地
git commit -m "提交说明"
连接到远程仓库,并将代码同步到远程仓库
git remote add origin 远程仓库地址。Git-基础
git remote add origin /Kiakaa/httpClientExample.git
推送到远程仓库
git push -u origin master
完整代码链接
如果觉得《Angular HttpClient http请求示例(GET PUT PATCH POST DELETE)》对你有帮助,请点赞、收藏,并留下你的观点哦!