javascript - 同一请求的多个 API 调用

Question

我想使用传递不同 ID 的同一端点进行多个 HTTP 调用。有没有更好的方法从 UI 处理这个问题。我们现在无法更改后端，有更好的方法吗？

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 character1 = this.http.get('https://swapi.co/api/people/1');
    let character2 = this.http.get('http://swapi.co/api/people/2');

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

Answer 1

您可以提取逻辑以在公共(public)函数内创建可观察对象并按如下方式使用它:

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 character1 = this.createHttpObservable('1');
    let character2 = this.createHttpObservable('2');

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

 createHttpObservable(id:string) {
   const url = 'https://swapi.co/api/people/';
   return this.http.get(`url${id}`);
 }
}