前端調用請求彙總

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 請求。

• 常規做法

• 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;
            });
        });
    }
  }

  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
      });
  }
}

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];
      });
  }
}

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  loadedCharacter: {};
  constructor(private http: HttpClient) {}

  ngOnInit() {
    let character = this.http.get('https://swapi.co/api/people/1');
    let characterHomeworld = this.http.get('http://swapi.co/api/planets/1');

    forkJoin([character, characterHomeworld]).subscribe(results => {
      // results[0] is our character
      // results[1] is our character homeworld
      results[0].homeworld = results[1];
      this.loadedCharacter = results[0];
    });
  }
}