Day22 【牙起來】 非同步事件 第一支訂閱 - RxJS

非同步事件

前端頁面的顯示總少不了後端的資料
要資料總會遇到網路問題，不是掉線就是延遲

在重要的資料還沒回來之前，前端頁面可以呈現 ex: 正在玩命加載中... 等圖片或字樣
或者先展示現其他已經回來了的資料

又或者當重要的資料卡住了、正在處理中
前端可以等待處理完畢、收到資料的那一刻，再進行後續的動作
ex: 等我(前端)真的收到錢了，再寄出貨品給你

以上各種屬於『如果OO好了再通知我』、『XX還沒回來，我先做ABC』的一連串事件
因為不是同時進行處理的，所以稱為 異步處理、非同步事件

RxJS

非同步處理方式有很多種
不同框架使用的寫法也都不盡相同

• Javascript 有promise、async、await 可以使用
• jQuery也有自己的Ajax deferred寫法
• Angular直接導入 RxJS函式庫 來處理非同步事件，RxJS (Reactive Extensions)是用Typescript寫成的，是對網頁進行非同步事件的封裝

此舉導致要學Angular的人，從此多了一樣東西要學

而接下來的RxJS是 Angular的重頭戲

測試環境

為了模擬現實環境，我建立了兩個API
可點擊以下網址，或者透過 Postman 對以下網址發送 GET 方法請求

• 取得所有武器
  https://63403667d1fcddf69cb402b7.mockapi.io/api/v1/weapons
• 取得所有防具
  https://63403667d1fcddf69cb402b7.mockapi.io/api/v1/armors

接下來會透過 http.get 來訪問頁面取得資源

第一支RxJS

開啟一個新的Angular專案 project03
與前一次相同，透過ng cli新建一個store元件

> ng g c store

修改app.component.html，把 store 元件放到畫面上顯示

<app-store></app-store>

修改store.component.ts，把HttpClient服務，注入進元件內，取名為http

...
import { HttpClient } from '@angular/common/http';
...

  constructor(private http: HttpClient) {
    let url = 'https://63403667d1fcddf69cb402b7.mockapi.io/api/v1/weapons';
    this.http.get(url).subscribe(result => {
      console.log(result);
    });
  }

...

接著務必在app.module.ts中新增這兩行
import HttpClient模組進專案內使用

...

import { HttpClientModule } from '@angular/common/http';

...

@NgModule({
    
    ...
    
  imports: [
    BrowserModule,
    HttpClientModule
  ],
...

結果畫面
可以看到確實從網路上要到資源、印出來哩~

RxJS的第一天，進度13%