我目前面临着发送 GET 请求的一堆 url [50 of em] 到 spotify 服务器,然后将它们的结果返回到单个 Observable/array/object 中的挑战。
我想出的当前代码:
curatedTopArtistTracks(artistIds) {
let responseStore = [];
for (let [index, artistId] of artistIds.entries()) {
let baseURL = `https://api.spotify.com/v1/artists/${artistId}/top-tracks?country=US`;
let response = this.http.get<any>(baseURL, { headers: this.customHeaders });
response.subscribe(
res => {
responseStore.push(res.tracks);
},
error => {
console.log('ERROR IN GETTING RESPONSE : INDEX : ', index);
}
);
}
return responseStore;
}
网址是:https://api.spotify.com/v1/artists/${artistId}/top-tracks?country=US
其中 ${artistId}
是动态的,有 50 个 artistId
.
我的理解
虽然该函数帮助我发送适当的请求并且我得到了 200 ok 响应,但明显的问题是 for 循环不会等到 HTTP 请求得到解决并返回未定义的 responseStore
.
我已经了解了 ForkJoin and mergemap in Rxjs
的一些概念并提出了以下代码:
例如:
curatedTopArtistTracks(artistIds): Observable<any> {
let responseStore = [];
for (let [index, artistId] of artistIds.entries()) {
let baseURL = `https://api.spotify.com/v1/artists/${artistId}/top-tracks?country=US`;
const requestURL = this.http.get(baseURL);
responseStore.push(requestURL);
}
return forkJoin(responseStore);
}
但是,上面的代码甚至没有开始获取响应,因为我猜是因为我将 url 插入数组并且 forkjoin 无法识别它。
任何关于如何实现上述目标的见解都会有所帮助!
更新
正如@martin 在下面的评论中提到的,我没有订阅该服务,但订阅后它运行良好。
如下:
let response = this.service.curatedTopArtistTracks(artistArray).subscribe(
res => {
console.log('RESPONSE : ', res);
},
error => {
console.log('error : ', error);
}
)
最佳答案
像这样尝试:
return request1().pipe(
mergeMap(res1=> request2(res1.id).pipe(
map(res2=> {
return {
res1: res1,
res2: res2
}
})
))
)
关于javascript - 使用 Angular 和 Rxjs 处理多个 HTTP 请求并返回结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59591900/