【2019-11-19】 英雄简介 -- HTTP

一、启用HTTP服务

HttpClient是Angular经过HTTP与远程服务器通信的机制
要让HttpClient在应用中随处可见，请

①打开根模块APPModule
②从@angular/common/http中导入HTTPClientModule符合
import { HttpClientModule } from '@angular/common/http';
③把它加入@NgModule.imports数组

二、模拟数据服务器

①使用内存 Web API（In-memory Web API）模拟出的远程数据服务器通信
可从npm安装： npm install angular-in-memory-web-api --save

②在app.module.ts中导入HttpClientInMemoryWebApiModule 和 InMemoryDataService 类

③把 HttpClientInMemoryWebApiModule 添加到 @NgModule.imports 数组中（放在 HttpClientModule 以后）， 而后使用 InMemoryDataService 来配置它。

forRoot()配置方法接受一个InMemoryDataService类（初期的内存数据库）做为参数

三、英雄与HTTP

在hero.service.ts中导入HttpClient ， 将httpClient注入到构造函数中一个名叫http的私有属性中 ， 经过http.get()获取数据

 

五、HTTP方法返回单个值

全部的HTTPClient方法都会返回某个值的RXJS Observable

HTTP是一个请求/响应式协议，你发起请求，它返回单个的响应

一般，Observable能够在一段时间内返回多个值。但来自HttpClient的Observable老是发出一个值，而后结束，不再会发出其余值，具体到此次的HttpClient.get调用，他返回一个Observable<Her0[]>，一个英雄数组的可观察对象

六、HTTP返回响应数据

HTTPClient.get默认状况下把响应体当作无类型的JSON对象返回。若是指定了可选的模板类型<Hero[]> ,就会给你返回一个类型化的对象

JSON数据的具体形态是由服务器的数据API决定的。可借助RxJS中map操做符对Observable的结果进行处理，以便获得自已想要的数据格式

七、错误处理

①导入catchError()

  ②使用.pipe方法来扩展Observable的结果，并给它一个catchError（）操做符

 

 

 catchError()操做符会拦截失败的Observable.它把错误对象传给错误处理器，错误处理器会处理这个错误

下面的handleError()会报告这个错误，并返回一个无害的结果，以便应用能正常工做

handleError

会在不少HeroService的方法之间共享，因此要把它通用化，以支持这些彼此不一样的需求，它再也不直接处理这些错误，而是给catchError返回一个错误处理函数，还要用操做名和出错时要返回的安全值来对这个错误处理函数进行配置

 

 

 

 在控制台中汇报这个错误以后，这个处理器会汇报一个用户友好的消息error.message,并给应用返回一个安全值[]，让它继续工做

由于每一个服务方法都会返回不一样类型的Observable结果，因此handleError也须要这样同样类型参数，以便返回一个此类型的安全值

八、使用RxJS中的tap操做符，查看Observable的值，使用那些值作一些使其，而且把他们传出来，这种tap回调不会改变这些值自己

 

九、经过id获取英雄

 

十、修改英雄

 

 http.put()须要三个参数：URL地址，须要修改的数据，选项

 十一、添加英雄

在service添加addHero方法

post方法会为指定的英雄建立一个id，而后把它经过Observable<Hero>返回给调用者

在heroes.component.ts中调用此方法

 

 十二、删除某个英雄

 

 

 

 

http.delete方法只须要url以及httpOptions参数

1三、根据名字搜索

 

若是没有搜索词，则方法返回一个空数组

 建立search component , 画search元素

 

 heroes$ : $是一个命名惯例，代表此变量是一个Observable,而不是数组

*ngFor不能直接使用Observable,因此须要 async 自动订阅到Observable

下面是search.component.ts

 

Subject 既是可观察对象的数据源，自己也是Observable , 也能够经过调用它的next(value)方法往Observable中推送一些值

在传出最终搜索字符前，debounceTime(300)将会等待，直到新增字符串的事件暂停了300ms，你实际发起请求的间隔永远不会小于300ms

distinctUnitilChanged() 会确保只在过滤条件发生变化时才发送请求

switchMap()会为每一个从debounce和distinctUntilChanged中经过的搜索词调用搜索服务。它会取消并丢弃之前的搜索可观察对象，只保留最近的

search()是经过对文本框的keystroke事件的事件绑定来调用的

 

 

// Tips

一、字面量 --在编程语言中，通常固定值称为字面量

二、模板字面量(Template Literal)是一种可以嵌入表达式的格式化字符串，有别于普通字符串，它使用(`) 包裹的字符，而不是双引号或者单引号。模板字面量包含特定形式 的占位符(${expression}),由美圆符合、大括号以及合法的表达式组成。合法的表达式(expression)能够是变量，算术，或函数调用，甚至还能够是模板字面量

三、JavaScript，ES5, Es6的区别 ？

javaScript是一种动态类型，弱类型，基于原型的客户端脚本语言，用来给HTML网页增长动态功能

动态：在运行时肯定数据类型，变量使用前不须要类型声明，一般变量的类型是被赋值的那个值的类型

弱类：计算时能够不一样类型之间对使用者透明地隐式转换，即便类型不正确，也能经过隐式转换来获得争取的类型

原型：是为了方便实现属性的继承
新对象继承对象（做为模板），将自身的属性共享给新对象，模板对象成为原型，这样新对象实例化后，不但能够享有自已建立时和运行时定义的属性，并且能够享有原型对象的属性

①全部的对象都有"[[prototype]]"属性（经过__proto__访问），该属性对应对象的原型
②全部的函数对象都有“prototype”属性，该属性的值会被赋值给该函数建立的对象的"__proto_"属性
③全部的原型对象都有“constructor”属性，该属性对应建立全部指向该原型的实例的构造函数
④函数对象和原型对象 经过“property”和“constructor属性进行相互关联

JavaScript由三部分组成：

①ECMAScript （核心）--规定了语言的组成部分：语法，类型，语句，关键字，保留字，操做符，对象

②DOM（文档对象模型）

DOM把整个页面映射为一个多层节点的结果

③BOM （浏览器对象模型）
支持能够访问和操做浏览器窗口的浏览器对象模型

ES5是ECMAScript的第五个版本 2019年完成

Es6是ECMAScript的第六个版本，2015年完成，so ES6 => ES2015

ECMA（European Computer Manufacturers Association）欧洲计算机厂商协会

四、typeScript的函数返回值类型能够省略，ts会自动根据return的值进行判断类型