为了寻求Observable http序列的帮助,我想对一个api进行两次http调用,第二次调用依赖于第一次调用。第一个返回一个url数组,第二个为该数组中的每个url发出get请求,然后返回流上的响应。如果我在一个依赖的请求中硬编码,这样我就可以找回我正在寻找的标题之一:
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的几十个方法中哪一个可以帮助我。有人能帮我吗?
有两种方法,如果您希望每个结果都单独流式传输,那么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 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
并返回[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}));