RxJS 處理多個Http請求

  • 2019 年 11 月 5 日
  • 筆記

有時候進入某個頁面時，我們需要從多個 API 獲取數據然後進行頁面顯示。管理多個非同步數據請求會比較困難，但我們可以藉助 Angular Http 服務和 RxJS 庫提供的功能來實現上述的功能。處理多個請求有多種方式，使用串列或並行的方式。

基礎知識

mergeMap

mergeMap 操作符用於從內部的 Observable 對象中獲取值，然後返回給父級流對象。

  • 合併 Observable 對象
import { of } from "rxjs";  import { mergeMap } from "rxjs/operators";    const source$ = of("Hello");  const example$ = source$.pipe(mergeMap(val => of(`${val} World!`)));  const subscribe = example$.subscribe(val => console.log(val));

在上面示例中包含兩種 Observable 類型：

  • 源 Observable 對象 —— 即 source$ 對象。
  • 內部 Observable 對象 —— 即 of(${val} World!) 對象。

僅當內部的 Observable 對象發出值後，才會合併源 Observable 對象輸出的值，並最終輸出合併的值。

forkJoin

forkJoin 是 RxJS 版本的 Promise.all()，即表示等到所有的 Observable 對象都完成後，才一次性返回值。

  • 合併多個 Observable 對象
import { timer, forkJoin } from "rxjs";  import { mapTo } from "rxjs/operators";    const getPostOne$ = timer(1000).pipe(mapTo({ id: 1 }));  const getPostTwo$ = timer(2000).pipe(mapTo({ id: 2 }));    forkJoin(getPostOne$, getPostTwo$).subscribe(    res => console.log(res)  );

處理 Http 請求

我們先來看一下 Angular Http 服務簡單示例：

import { Component, OnInit } from '@angular/core';  import { HttpClient } from '@angular/common/http';    @Component({    selector: 'my-app',    template: `      <p>HttpModule Demo</p>    `  })  export class AppComponent implements OnInit {    constructor(private http: HttpClient) { }      ngOnInit() {      this.http.get('https://jsonplaceholder.typicode.com/users')        .subscribe(users => console.log(users));    }  }

上面示例中，我們通過依賴注入方式注入 HttpClient 服務，然後在 ngOnInit() 方法中調用 http 對象的 get() 方法來獲取數據。這個例子很簡單，它只處理一個請求，接下來我們來看一下如何處理兩個請求。

Map 和 Subscribe

有些時候，當我們發送下一個請求時，需要依賴於上一個請求的數據。即我們在需要在上一個請求的回調函數中獲取相應數據，然後在發起另一個 HTTP 請求。

import { Component, OnInit } from '@angular/core';  import { HttpClient } from '@angular/common/http';    @Component({    selector: 'my-app',    template: `      <p>{{username}} Detail Info</p>      {{user | json}}    `  })  export class AppComponent implements OnInit {    constructor(private http: HttpClient) { }      apiUrl = 'https://jsonplaceholder.typicode.com/users';    username: string = '';    user: any;      ngOnInit() {      this.http.get(this.apiUrl)        .subscribe(users => {          let username = users[6].username;          this.http.get(`${this.apiUrl}?username=${username}`)            .subscribe(            user => {              this.username = username;              this.user = user;            });        });    }  }

在上面示例中，我們先從 https://jsonplaceholder.typicode.com/users 地址獲取所有用戶的資訊，然後再根據指定用戶的 username 進一步獲取用戶的詳細資訊。雖然功能實現了，但有沒有更好的解決方案呢？答案是有的，可以通過 RxJS 庫中提供的 mergeMap 操作符來簡化上述的流程。

mergeMap

import { Component, OnInit } from '@angular/core';  import { HttpClient } from '@angular/common/http';  import { mergeMap } from 'rxjs/operators';    @Component({    selector: 'my-app',    template: `      <p>{{username}} Detail Info</p>      {{user | json}}    `  })  export class AppComponent implements OnInit {    constructor(private http: HttpClient) { }      apiUrl = 'https://jsonplaceholder.typicode.com/users';    username: string = '';    user: any;      ngOnInit() {      this.http.get(this.apiUrl)        .pipe(mergeMap(users => {          let username = users[6].username;          return this.http.get(`${this.apiUrl}?username=${username}`)        })).subscribe(user => {          this.user = user        });    }  }

在上面示例中，我們通過 mergeMap 操作符，解決了嵌套訂閱的問題。最後我們來看一下如何處理多個並行的 Http 請求。

forkJoin

接下來的示例，我們將使用 forkJoin 操作符。如果你熟悉 Promises 的話，該操作符與 Promise.all() 實現的功能類似。forkJoin 操作符接收一個 Observable 對象列表，然後並行地執行它們。一旦列表的 Observable 對象都發出值後，forkJoin 操作符返回的 Observable 對象會發出新的值，即包含所有 Observable 對象輸出值的數組。具體示例如下：

import { Component, OnInit } from '@angular/core';  import { HttpClient } from '@angular/common/http';  import { forkJoin } from "rxjs";    @Component({    selector: 'my-app',    template: `      <p>Post Detail Info</p>      <ul>        <li>{{post1 | json}}</li>        <li>{{post2 | json}}</li>      </ul>    `  })  export class AppComponent implements OnInit {    constructor(private http: HttpClient) { }      apiUrl = 'https://jsonplaceholder.typicode.com/posts';    post1: any;    post2: any;      ngOnInit() {      let post1$ = this.http.get(`${this.apiUrl}/1`);      let post2$ = this.http.get(`${this.apiUrl}/2`);        forkJoin([post1$, post2$])        .subscribe(results => {          this.post1 = results[0];          this.post2 = results[1];        });    }  }

感興趣的同學可以查看 Stackblitz 完整示例。

參考資源

  • angular-multiple-http-requests-with-rxjs
  •  Six Operators That you Must Know

Tags:

VirMach 便宜 VPS