1 HttpClient介绍

  HttpClient时Http的演进,注意:Http在@angular/http中,而HttpClient在@angular/common/http中; 使用前需要在模块级别导入HttpClientModule,通常的做法是在核心模块中导入,在将核心模块导入到主模块中

2 HttpClient特性说明

  2.1 默认JSON解析

    HttpClient使用的默认数据格式就是JSON,所以不需要在利用map进行数据格式转化了,即:http.get(url).map(res => res.json()).subscribe(...)将被http.get(url).subscribe(...)代替;

  2.2 拦截器

    待更新......

    2018-3-12 15:00:20

    参考博文:点击前往

3 HttpClient编程步骤

  3.1 导入HttpClientModule

    在模块级别导入HttpClientModule

    技巧01:直接在主模块中导入即可,但是一般的做法是将一些只导入一次的模块放到一个核心模块中,再将核心模块导入到主模块中即可

import { NgModule,  SkipSelf, Optional } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { FooterComponent } from './footer/footer.component'; import 'hammerjs';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { SidenavComponent } from './sidenav/sidenav.component';
import { SharedModule } from '../shared/shared.module';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http'; @NgModule({
imports: [
BrowserAnimationsModule,
SharedModule,
RouterModule,
HttpModule,
HttpClientModule
],
declarations: [
HeaderComponent,
MainComponent,
FooterComponent,
SidenavComponent
],
exports: [
HeaderComponent,
MainComponent,
FooterComponent,
SidenavComponent
]
})
export class CoreModule {
constructor( @Optional() @SkipSelf() parent: CoreModule) {
if (parent) {
throw new Error('核心模块已经加载了,请勿重复加载');
}
}
}

核心模块

    坑01:和表单相关的模块不能在核心模块中导入,只能在共享模块中导入,再将需要用到表单的模块中导入共享模块

  3.2 创建一个Http服务

    创建一个服务文件专门来存放一些执行Http请求的方法,在该服务中依赖注入 HttpClient,利用HttpClient对象去执行Http请求

    坑01:HttpClient对象提供的get、post、delete、put方法的返回值都是一个已经转化成了JSON数据的JavaScript对象,如果想获取该对象中的某个属性就必须使用  对象名[ ‘属性名’ ]  这样的格式,不能使用   对象名.属性名  这种格式;如果使用   对象名.属性名   这种格式时就必须在调用HttpClient对象提供的方法时通过泛型来对响应数据进行类型指定,例如:

      

    

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ClientBaseInfo, responseResult } from '../model/ClientBaseInfo'; @Injectable()
export class TestService { constructor(
private http: HttpClient
) {} testGet() {
return this.http.get<responseResult<ClientBaseInfo>>('http://127.0.0.1:8888/dev/client/findAll');
} }

Http服务

  3.3 依赖注入Http服务

    在模块级别依赖注入自己定义的Http服务

    

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Test01Component } from './test01/test01.component';
import { CoreModule } from '../core/core.module';
import { TestHomeComponent } from './test-home/test-home.component';
import { SharedModule } from '../shared/shared.module';
import { TestRoutingModule } from './test-routing.module';
import { Test02Component } from './test02/test02.component';
import { Test03Component } from './test03/test03.component';
import { TestDemoComponent } from './test-demo/test-demo.component';
import { HttpModule } from '@angular/http';
import { TestService } from './test.service'; @NgModule({
imports: [
SharedModule,
TestRoutingModule
],
declarations: [
TestHomeComponent,
Test01Component,
Test02Component,
Test03Component,
TestDemoComponent
],
exports: [
Test01Component
],
providers: [
TestService
]
})
export class TestModule { }

模块级别依赖注入Http服务

  3.4 执行Http请求

    在组件中调用Http服务提供的方法发送Http请求

    

    坑01:当响应数据的结果是多个同类型的对象组成的实例组成的列表时,如果想将这个列表赋值给一个指定了类型的的列表是会报类型错误的,例如:响应数据是 [ a, b, c, d ]  其中 a b c d 都是 Person类 的实例,现在将 [ a , b, c, d ] 赋值给 result 其中 result 的类型是 Person[] , 这时候就会包类型错误 -> 不能将类型“Person”分配给类型“Person[]”,但是如果将result类型改成Person就会编译成功,而且还可以在视图中把result当成一个列表来使用;具体原因不详。

4 HttpClient实现CRUD实例

  在实际的生产环境中是不会删除数据的,只会修改数据的有效状态,所以不会用到DELETE

import { Injectable } from '@angular/core';
import { HttpParams, HttpClient, HttpHeaders } from '@angular/common/http';
// import { Http } from '@angular/http'
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { ClientBaseInfo, ResponseResult } from '../model/ClientBaseInfo'; @Injectable()
export class ClientService {
constructor(
// private http: Http
private http: HttpClient
) {} // 查询所有的客户信息
getClientInfo() {
// 利用Http实现
// return this.http.get('http://localhost:3333/clientBaseInfo').map(result => result.json()); // 利用HttpClient实现
// return this.http.get('http://localhost:3333/clientBaseInfo');
return this.http.get<ResponseResult<ClientBaseInfo>>('http://127.0.0.1:8888/dev/client/findAll');
} // 根据姓名查询客户信息
getClientInfoByName(name: string) {
const params = new HttpParams()
.set('name', name);
const headers = new HttpHeaders().set("Content-Type", "application/json"); return this.http
.get<ResponseResult<ClientBaseInfo>>(
'http://127.0.0.1:8888/dev/client/findByName',
{params, headers}
)
} getClientInfoByIdcard(idcard: string) {
const params = new HttpParams()
.set('idcard', idcard);
const headers = new HttpHeaders().set("Content-Type", "application/json");
return this.http.get<ResponseResult<ClientBaseInfo>>(
'http://127.0.0.1:8888/dev/client/findByIdcard',
{params, headers}
);
} // 新增客户信息
createClientInfo(clientBaseInfo: ClientBaseInfo) {
const headers = new HttpHeaders().set("Content-Type", "application/json");
// const body = {
// "name": "郭靖",
// "phone": "12272222616",
// "address": "襄阳城",
// "gender": "男",
// "idcard": "500228199210031925",
// "hometown": "西北边塞",
// "remarks": "降龙十八掌",
// "status": 1
// };
const body = clientBaseInfo;
return this.http.post<ResponseResult<Object>>('http://127.0.0.1:8888/dev/client/create', body, {headers});
} // 修改客户信息
updateClientInfo(clientBaseInfo: ClientBaseInfo) {
const headers = new HttpHeaders().set("Content-Type", "application/json");
// const body = {
// "name": "郭靖",
// "phone": "12272222616",
// "address": "襄阳城",
// "gender": "男",
// "idcard": "500228199210031933",
// "hometown": "西北边塞",
// "remarks": "爱吃烤全羊",
// "status": 1
// };
const body = clientBaseInfo;
return this.http.put<ResponseResult<Object>>('http://127.0.0.1:8888/dev/client/update', body, {headers});
} test(clientBaseInfo: ClientBaseInfo) {
const headers = new HttpHeaders().set("Content-Type", "application/json");
const body = clientBaseInfo;
return this.http.put('http://127.0.0.1:8888/dev/client/update', body, {headers});
} }

Angular22 HttpClient的使用的更多相关文章

  1. HttpClient的替代者 - RestTemplate

    需要的包 ,除了Spring的基础包外还用到json的包,这里的数据传输使用json格式 客户端和服务端都用到一下的包 <!-- Spring --> <dependency> ...

  2. 关于微软HttpClient使用,避免踩坑

    最近公司对于WebApi的场景使用也越来越加大了,随之而来就是Api的客户端工具我们使用哪个?我们最常用的估计就是HttpClient,在微软类库中命名空间地址:System.Net.Http,是一个 ...

  3. 使用HttpClient的优解

    新工作入职不满半周,目前仍然还在交接工作,适应环境当中,笔者不得不说看别人的源码实在是令人痛苦.所幸今天终于将大部分工作流畅地看了一遍,接下来就是熟悉框架技术的阶段了. 也正是在看源码的过程当中,有一 ...

  4. Java的异步HttpClient

    上篇提到了高性能处理的关键是异步,而我们当中许多人依旧在使用同步模式的HttpClient访问第三方Web资源,我认为原因之一是:异步的HttpClient诞生较晚,许多人不知道:另外也可能是大多数W ...

  5. 揭秘Windows10 UWP中的httpclient接口[2]

    阅读目录: 概述 如何选择 System.Net.Http Windows.Web.Http HTTP的常用功能 修改http头部 设置超时 使用身份验证凭据 使用客户端证书 cookie处理 概述 ...

  6. C#中HttpClient使用注意:预热与长连接

    最近在测试一个第三方API,准备集成在我们的网站应用中.API的调用使用的是.NET中的HttpClient,由于这个API会在关键业务中用到,对调用API的整体响应速度有严格要求,所以对HttpCl ...

  7. HttpClient调用webApi时注意的小问题

    HttpClient client = new HttpClient(); client.BaseAddress = new Uri(thisUrl); client.GetAsync("a ...

  8. HttpClient相关

    HTTPClient的主页是http://jakarta.apache.org/commons/httpclient/,你可以在这里得到关于HttpClient更加详细的信息 HttpClient入门 ...

  9. Atitit.http httpclient实践java c# .net php attilax总结

    Atitit.http httpclient实践java c# .net php attilax总结 1. Navtree>> net .http1 2. Httpclient理论1 2. ...

随机推荐

  1. 数据结构录 之 单调队列&单调栈。(转)

    http://www.cnblogs.com/whywhy/p/5066306.html 队列和栈是很常见的应用,大部分算法中都能见到他们的影子. 而单纯的队列和栈经常不能满足需求,所以需要一些很神奇 ...

  2. EXCEL对比重复数据

    一.       EXCEL 突出重复项 1.      选择对应的数据 EXCEL 里选择好数据 2.      选择条件格式 这样就完成了数据重复的突出,可以按条件筛选.选择自己想要的数据

  3. MySQL 创建千万集数据

    - MySQL测试任务:使用存储过程,往表中插入千万级数据,根据索引优化速度 -- 1.使用索引查询 -- 2.不使用索引查 -- 3.比较两者查询速度的差异 1.创建数据和索引 1.创建索引测试表 ...

  4. Kattis - redblacktree Red Black Tree (树形背包)

    问题:有一课含有n(n<=2e5)个结点的数,有m(m<=1000)个结点是红色的,其余的结点是黑色的.现从树中选若干数量的结点,其中红色的恰有k个,并且每个结点都不是其他任何另一个结点的 ...

  5. leetcode_sql_2,183

    183. Customers Who Never Order Suppose that a website contains two tables, the Customers table and t ...

  6. hadoop-sqoop学习笔记

    ======导入==== sqoop import --connect jdbc:mysql://20.12.20.165:3306/luo0907 --username root --passwor ...

  7. 设置Qt应用程序图标及应用程序名 【转载】

    一直以来很纠结给qt应用程序添加图标问题,在网上收过一次,但是感觉不够完整,现将自己的实现过程记录下,以便以后查看: 通过网上的例子知道qt助手中有相关说明: Setting the Applicat ...

  8. 仿百度下拉关键词,和关键词的小demo

    自己做项目时用到的仿百度下拉关键词 代码: $(function(){ var oTxt = document.getElementById('search_text'); oTxt.onkeyup ...

  9. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  10. 遍历js的obj中所有属性得key

    var obj = $("#jstree_default").jstree("get_checked"); for (var a in obj) { alert ...