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

## 非同步事件

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

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

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

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

## RxJS

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

* `Javascript` 有`promise`、`async`、`await` 可以使用
* `jQuery`也有自己的Ajax `deferred`寫法
* `Angular`直接導入 [**RxJS**函式庫](https://rxjs.dev/) 來處理非同步事件，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%