【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的值進行判斷類型