【CuteJavaScript】Angular6入門項目（3.編寫服務和引入RxJS）

本文目錄

一、項目起步
二、編寫路由組件
三、編寫頁面組件
- 1.編寫單一組件
- 2.模擬數據
- 3.編寫主從組件
四、編寫服務
- 1.爲什麼需要服務
- 2.編寫服務
五、引入RxJS
- 1.關於RxJS
- 2.引入RxJS
- 3.改造數據獲取方式
六、改造組件
- 1.添加歷史記錄組件
- 2.添加和刪除歷史記錄
七、HTTP改造
- 1.引入HTTP
- 2.通過HTTP請求數據
- 3.通過HTTP修改數據
- 4.通過HTTP增加數據
- 5.通過HTTP刪除數據
- 6.通過HTTP查找數據

本項目源碼放在github

四、編寫服務

截止到這部分，我們的BooksComponent組件獲取和顯示的都是本地模擬的數據。
接下來我們要開始對這些進行重構，讓聚焦於爲它的視圖提供支持，這也讓它更容易使用模擬服務進行單元測試。

1.爲什麼需要服務

我們不應該讓組件來直接獲取或保存數據，它們應該聚焦於展示數據，而數據訪問的工作交給其他服務來做。
這裏我們需要創建一個名爲BooksService的服務，讓我們應用中所有的類都使用它來獲取書本列表的數據，使用的時候，只需要將它通過Angular的依賴注入機制注入到需要用的組件的構造函數中。

知識點：
服務可以實現多個不同組件之間信息共享，後面我們還會將它注入到兩個地方：
BooksService中，使用該服務發送消息。
IndexService中，使用該服務來展示消息。

接下來我們使用命令行，創建BooksService ：

ng g service books

在生成的books.service.ts文件中：

// books.service.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})

新導入了@Injectable裝飾器，是爲了讓BooksService提供一個可注入的服務，並且它還可以擁有自己的待注入的依賴，簡單理解就是如果你的服務需要依賴，那麼你就需要導入它。
並且它接收該服務的元數據對象。

2.編寫服務

接下來我們開始編寫books.service.ts服務。

導入服務所需組件

這裏我們導入Books和BookList，並添加一個getBooks方法來返回所有書本的數據，並且還需要添加一個getBooks方法來返回指定id的書本信息:

// index.component.ts
import { Books } from './books';
import { BookList } from './mock-books';
@Injectable({
  providedIn: 'root'
})
export class BooksService {
  constructor() { }
  getBookList(): Books[] {
    return BookList;
  }
  getBook(id: number): Books{
    return BookList.find(book => book.id === id)
  }
}

在我們使用這個服務之前，需要先註冊該服務，因爲我們在使用ng g service books命令創建服務時，CLI已經默認爲我們添加了註冊了，這是方法就是上面代碼中的：

providedIn: 'root'

表示將我們的服務註冊在根注入器上，這樣我們就可以把這個服務注入到任何享用的類上了。

修改IndexComponent

先刪除BookList的引入，並修改books屬性的定義：

// index.component.ts
import { BooksService } from '../books.service';
export class IndexComponent implements OnInit {
  books : Books[];
  ngOnInit() {}
}

然後注入我們的BooksService服務，需要先往構造函數中添加一個私有的booksservice，使用注入的BooksService作爲類型，理解成一個注入點：

// index.component.ts
constructor(private booksservice: BooksService) { }

之後我們需要添加一個getBooks方法來獲取這些書本數據，並在生命週期函數ngOnInit中調用：

export class IndexComponent implements OnInit {
  ngOnInit() {
    this.getBooks();
  }
  getBooks(): void{
    this.books = this.booksservice.getBookList();
  }
}

修改DetailComponent

我們先改造書本詳情頁的HTML結構：

<!-- detail.component.html -->
<div *ngIf="books" class="detail">
  <h3>《{{books.title}}》介紹</h3>
  <div>
    <img src="{{books.url}}">
  </div>
  <p>書本標題: {{books.title}}</p>
  <p>書本作者: {{books.author}}</p>
  <p>書本id: {{books.id}}</p>
</div>
<div *ngIf="!books" class="detail">
  <h3>暫無信息</h3>
</div>

知識點：
這裏使用了*ngIf指令，當條件爲true則顯示其HTML內容。

// detail.component.ts
import { Books } from '../books';
import { BooksService } from '../books.service';
export class DetailComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private booksservice: BooksService  // 引入BooksService服務
  ) { }

  books: Books;  // 定義books類型
  ngOnInit() {
    this.getDetail()
  }
  getDetail(): void{
    const id = +this.route.snapshot.paramMap.get('id');
    this.getBooks(id);
  }
  getBooks(id: number): void {
    this.books = this.booksservice.getBook(id);
  }
}

這段代碼，主要定義了getBooks方法，當剛進入頁面時，將書本id傳入getBooks方法，去BooksService去獲取對應id的書本信息，並複製給變量books，然後展示到頁面。

改造之後，我們的頁面顯示依舊正常。

但是我們要知道，這背後的邏輯已經改變了。

五、引入RxJS改造項目

1.關於RxJS

這裏簡單介紹關鍵概念，具體可以查看 RxJS 官網，也可以參考淺析Angular之RxJS。

什麼是RxJS

RxJS全稱Reactive Extensions for JavaScript，中文意思: JavaScript的響應式擴展。
RxJS主要是提供一種更加強大和優雅的方式，來利用響應式編程的模式，實現JavaScript的異步編程。

RxJS優點

純淨性；
流動性；

RxJS核心概念

RxJS 是基於觀察者模式和迭代器模式以函數式編程思維來實現的。RxJS 中含有兩個基本概念：Observables 與 Observer。
Observables 作爲被觀察者，是一個值或事件的流集合；而 Observer 則作爲觀察者，根據 Observables 進行處理。它們之間的訂閱發佈關係(觀察者模式) 如下：
訂閱：Observer 通過 Observable 提供的 subscribe() 方法訂閱 Observable。
發佈：Observable 通過回調 next 方法向 Observer 發佈事件。

———— 來源Angular修仙之路 RxJS Observable

另外這裏列出來一些核心，具體還是看官網咯，並且下面使用到的時候會具體介紹。

Observable (可觀察對象): 表示一個概念，這個概念是一個可調用的未來值或事件的集合。
Observer(觀察者): 一個回調函數的集合，它知道如何去監聽由 Observable 提供的值。
Subscription (訂閱): 表示 Observable 的執行，主要用於取消 Observable 的執行。
Operators (操作符): 採用函數式編程風格的純函數 (pure function)，使用像 map、filter、concat、flatMap 等這樣的操作符來處理集合。
Subject (主體): 相當於 EventEmitter，並且是將值或事件多路推送給多個 Observer 的唯一方式。
Schedulers (調度器): 用來控制併發並且是中央集權的調度員，允許我們在發生計算時進行協調，例如 setTimeout 或 requestAnimationFrame 或其他。

2.引入RxJS

在我們的真實應用中，我們必須要等到服務器響應後，我們才能獲取到數據，因此這天生就需要用異步思維來操作。

由於Angular中已經自帶RxJS，所以我們只要在需要使用的時候，引入即可使用：

3.改造數據獲取方式

瞭解完RxJS的一些概念後，我們開始改造下這些書本的數據獲取方式。

改造BooksService

首先我們從 RxJS 中導入 Observable 和 of 符號：

// books.service.ts
import { Observable, of } from 'rxjs';

知識點：
Observable: 觀察者模式中的觀察者，具體可以參考 Angular修仙之路 RxJS Observable
of: 用來獲取觀察者拿到的數據，通常是一個Observable。

然後修改getBookList方法

// books.service.ts
getBookList(): Observable<Books[]> {
  return of(BookList);
}

這裏 of(BookList) 返回一個 Observable<Books[]>，它會發出單個值，這個值就是這些模擬書本的數組。

改造IndexComponent

這裏也要修改getBooks方法，使用subscribe去訂閱服務返回回來的值：

// index.component.ts
getBooks(): void{
  this.booksservice.getBookList()
    .subscribe(books => this.books = books);
}

由於原本直接賦值數據，在實際場景中是不可能這樣同步的，所以這裏subscribe函數，會在Observable發出數據以後，再把書本列表傳到裏面的回調函數，再複製給books屬性。
使用這種異步方式，當 BooksService 從遠端服務器獲取英雄數據時，不用擔心還沒拿到數據就執行後面。

下一步，我們就要改造一下項目了。

本部分內容到這結束

Author	王平安
E-mail	[email protected]
博客	www.pingan8787.com
微信	pingan8787
每日文章推薦	https://github.com/pingan8787...
JS小冊	js.pingan8787.com
微信公衆號	前端自習課

【CuteJavaScript】Angular6入門項目（3.編寫服務和引入RxJS）

本文目錄

四、編寫服務

1.爲什麼需要服務

2.編寫服務

五、引入RxJS改造項目

1.關於RxJS

什麼是RxJS

RxJS優點

RxJS核心概念

2.引入RxJS

3.改造數據獲取方式

前端如何優雅處理類數組對象？

CORS 和 CSRF 修煉寶典

1.2w字｜初中級前端 JavaScript 自測清單 - 1

【大廠】645- 智聯前端團隊的 GraphQL 技術沉澱

【JS】646- 1.2w字｜初中級前端 JavaScript 自測清單 - 1

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結