Angular 2 个带有可迭代数组的链式 Http Get 请求

Question

在 Observable http 序列方面寻求帮助，我想对 api 进行两次 http 调用，第二个依赖于第一个。第一个 returns 一个 Urls 数组，第二个 url 对该数组中的每个 url 发出请求，然后 returns 流上的响应。如果我像这样在一个依赖请求中硬编码，我会找回我正在寻找的标题之一：

search(character): Observable<any> {
let that = this
let queryUrl: string = character.url;
return this.http.get(queryUrl)
  .map((response: Response) => {
    this.characterResults = response.json().films
    return this.characterResults
        //Example response: 
        // ["https://api.com/films/1", "https://api.com/films/2", "https://api.com/films/3", "https://api.com/films/4"]
  })
  .flatMap((film) => {
    return that.http.get(film[0])
    .map((response: Response) => {
      return response.json().title
    })
  })
}

getApiData(character) {
    this.apiService.search(character)
    .subscribe((results) => { // on sucesss
          console.log(results)
        },
        (err: any) => { // on error
          console.log(err);
        },
        () => { // on completion
          console.log('complete')
        }
      );

但是任何尝试在该数组上使用 forEach 进行迭代然后进行所有 http 调用都会给我这个错误：

browser_adapter.js:84 EXCEPTION: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

理想情况下，我想要一种优雅的方式来使这些后续调用与第一次调用的结果数组并行，但我似乎无法弄清楚 rxJs 的数十种方法中的哪一种可以帮助我做到这一点。谁能给我任何帮助？

Answer 1

两种方式，如果您希望每个结果单独流式传输，那么 flatMap 是您的朋友。您可以使用它来拉平任何东西，Arrays、Promises 或 Observables。在您的情况下，您可以通过执行以下操作将请求链接在一起：

search(character): Observable<any> {
  return this.http.get(character.url)
    .flatMap((response: Response) => response.json().films)
    .flatMap((film: string) => this.http.get(film), 
             (_, resp) => resp.json().title)
}

getApiData(character) {
    this.apiService.search(character)
      .subscribe((results) => { // on sucesss
          //Called for each url result
          console.log(results)
        },
        (err: any) => { // on error
          console.log(err);
        },
        () => { // on completion
          console.log('complete')
        }
      );

或者您可以使用 forkJoin 代替 return 结果数组

return this.http.get(character.url)
  .flatMap((response: response) => 
             //Waits until all the requests are completed before emitting
             //an array of results
             Observable.forkJoin(response.json().files.map(film => 
               this.http.get(film).map(resp => resp.json().title)
             ));

编辑 1

更完整地解决 flatMap 的第二个参数。它是一个函数，它接收传递给第一个选择器方法的原始值与展平操作的结果配对。也就是说，如果选择器 1 收到 a 并且 return 是 [1, 2, 3] 的 Observable。第二个选择器将使用参数 (a, 1)、(a, 2) 和 (a, 3) 调用 3 次。

如果您想获得多个值，我建议您使用辅助映射运算符来保持流程干净，但这取决于您。

.flatMap((film: string) => this.http.get(film),
         (film: string, resp: Response) => resp.json())
//Typescript's destructuring syntax, extracts the values you want
//and creates a new object with only those fields
.map(({date, title}) => ({date, title}));

Angular 2 个带有可迭代数组的链式 Http Get 请求

Angular 2 chained Http Get Requests with Iterable Array

observable

rxjs

typescript

angular2-http

angular