RxJS的學習之路一（RxJS初探）

引言

做爲前端小白，在進入第一個公司後的項目用的框架就是三大框架中最難的angular4，在折騰完angular的語法和typeScript後開始寫一些業務代碼，發現angular的項目中有大量RxJS的內容，在異步請求，狀態管理，服務管理等等方面都有應用。而這個東西又實在折騰人，官方文檔上面寫的晦澀又抽象，網上的中文資料也不多，還有不少是老版本的東西，看的一臉懵逼。

在踩了許多坑以後決定將本身的學習過程用博客記錄下來，但願能夠加深記憶，也但願能對新學RxJS的人有些許幫助

文章參考

文章參考了不少網上的資料及自身的學習過程

RxJS中文文檔

it邦鐵人賽，JerryHong大佬的30天精通RxJS系列（強烈推薦）

RxJS簡單入門

RxJS是什麼

RxJS是一個異步編程的庫，同時它經過observable序列來實現基於事件的編程，它使編寫異步或基於回調的代碼更容易。

RxJS的優點

這個問題百度下都能有答案，在我看來，RxJS的最大優點就在於兩點：

• 代碼量的大幅度減小
• 代碼可讀性的提升

文字的敘述實在抽象，我就從工做中遇到的第一RxJS的案例來講明。

我遇到的需求是angular中表單的異步校驗功能，須要驗證輸入表單中的名稱後臺是否存在，angular中表單存在異步校驗器，異步校驗器須要你輸出一個觀察者對象，監聽輸入事件，並返回檢驗結果。

按照之前的思惟模式，咱們完成這個校驗器的思路應該是：

1. 監聽鍵盤事件或者input的valueChange事件

2.將觸發的事件進行，防抖，去重處理

3. 發送請求到後臺獲取當前的名稱庫（由於數量不大，因此驗證由前端進行）

4. 檢查是否存在

寫出來代碼就是這樣

nameValidator = (control: FormControl) => Observable.create((observer: Observer<ValidationErrors>) => {
    let timer: any; 
    // 監聽valuechange事件
    control.valueChanges().subscribe(name => {
      clearTimeout(timer)
      // 定義400毫秒延時器來防抖
      timer = setTimeout(() => {  
        this._serv.getAnalysisDetail(this.analysisId).subscribe(res => {
          const valueSet = res.data.instanceList;
          // 檢查名稱是否存在並返回校驗結果
          if (valueSet.find(item => item.name === name)) {
            observer.next({ nameValidator: true })  // 名稱存在
          } else {
            observer.next(null)  // 名稱不存在
          }
          observer.complete();
        })
      }, 400);
    })
  });
複製代碼

這樣的寫法也是antd中異步校驗器的例子的寫法，也是我當時接到需求提交的代碼，在同事review以後，他用RxJS直接重構了這個函數，代碼量大幅減小，可讀性也增長了

nameValidator = (control: FormControl) => this.instanceLen ? control.valueChanges.pipe(
    debounceTime(400), // 防抖
    switchMap(
      name => zip(this._serv.getAnalysisDetail(this.analysisId), of(name)) // 將名稱和請求結果合併輸出
    ),
    map(([res, name]: any[]) => {
    // 檢查並返回結果
      const nameCheck = res.data.instanceList ? !!res.data.instanceList.find(item => item.name === name) : false;
      return nameCheck ? control.setErrors({ nameValidator: true }) : control.setErrors(null);
    })
  ) : of(null)
複製代碼

RxJS將思路徹底轉化爲了一種‘流式編程’的思想

• 獲取valuechange事件最爲事件流，並放到管道（pipe）中
• debouceTime爲管道中第一道處理，是RxJS內置的防抖接口
• switchMap將流過來的數據和另一個流（異步請求）合併，兩兩輸出
• 輸出的結果在map函數中進行結果處理

RxJS將各類繁雜的回調函數用事件流的方式展示出來，只要你知道相應的語法和api，不用註釋也能清楚這個流程，代碼可讀性大大增長。

RxJS要學些什麼

官網上列了六個須要學習的內容，而我從實際應用中，經常使用和必須掌握的是這四點

• Observable：表明了一個調用將來值或事件的集合的概念
• Observer：表明了一個知道如何監聽Observable傳遞過來的值的回調集合
• Operators：是一個純函數，容許處理集合與函數式編程風格的操做，好比map、filter、concat、flatMap等
• Subject：至關於一個EventEmitter，它的惟一的方法是廣播一個值或事件給多個Observer

而這其中最重要的就是obserable的理解和subject的理解使用。

我計劃在以後的幾篇文章中，對RxJS的這些方面進行一遍梳理，而且探究它在狀態管理等其餘方面的應用，但願對本身，對新學習RxJS的人能有所幫助，你們都能寫出優雅簡潔的代碼。