如何在執行並完成n個HTTP請求的列表後執行HTTP請求

Question

我正在使用Spotify的Web Api。我有一個songSearches數組。對於songSearches中的每首songSearch，都會請求搜索這些歌曲，並將其添加到我擁有軌道的Spotify ID的歌曲數組中。我需要所有這些ID，以便我可以執行一個POST請求，將所有這些音軌添加到播放列表中。因此，所有的搜索請求都必須在發出POST請求之前完成。

所有這些都需要點擊按鈕。

onSubmit(){ 
    while (this.songsService.songSearches.length){ 
    this.spotifyserv.searchTrack(this.songsService.songSearches[0]); 
    this.songsService.songSearches.shift(); 
    } 
    this.spotifyserv.add_tracks_to_playlist(); //Needs to wait until all requests^have been completed 
} 

搜索跟蹤功能：

searchTrack(searchParams: SongSearchParams, type='track'){ 
    var headers = new Headers({'Authorization': 'Bearer ' + this.hash_params.access_token}); 
    this.user_url = "https://api.spotify.com/v1/search?query="+searchParams.artist+' '+searchParams.title+"&offset=0&limit=1&type="+type+"&market=US"; 
    return this.http.get(this.user_url, {headers : headers}) 
    .subscribe(
     response => { 
       var res = response.json(); 
       var searched_song = {artist : null, title : null, imagePath : null, spotifyID : null} 
       searched_song.artist = res.tracks.items[0].artists[0].name; 
       searched_song.title = res.tracks.items[0].name; 
       searched_song.imagePath = res.tracks.items[0].album.images[0].url; 
       searched_song.spotifyID = res.tracks.items[0].id; 
       this.songsService.addSong(searched_song); 
     } 
    ); 
} 

添加曲目到播放列表功能

add_tracks_to_playlist(){ 
    var headers = new Headers({'Authorization': 'Bearer ' + this.hash_params.access_token}); 
    headers.append('Accept', 'application/json'); 
    this.user_url = "https://api.spotify.com/v1/users/" + this.user_id + "/playlists/" + this.playlist_id + "/tracks"; 
    let songs: Song[] = this.songsService.getSongs(); //playlist_id is hardcoded rn. needs to be added dynamically 
    let songIDs : String [] = []; 
    for (var i = 0; i < songs.length; i++){ 
    songIDs.push("spotify:track:" + songs[i].spotifyID); 
    } 
    let body = {"uris": songIDs}; 
    this.http 
     .post(this.user_url, JSON.stringify(body), {headers : headers}) 
     .toPromise() 
     .then(response => console.log(response)) 
     .catch(this.handleError); 
} 

我明白，我可能要使用單擊按鈕時執行

代碼Promise.all（）在某處，但我不知道如何/在哪裏使用它

Answer 1

正如你所提到的，Promise.all()可以幫助你，如果searchTrack()返回Promise。因此，像這樣：

searchTrack(searchParams: SongSearchParams, type='track') { 
    // ... 
    return this.http.get(this.user_url, {headers : headers}) 
    .toPromise() 
    .then(response => { 
     // Code from your subscribe 
    }); 
} 

和改變的onsubmit

onSubmit(){ 
    const searchPromises: Promise<void>[] = []; 
    while (this.songsService.songSearches.length){ 
    searchPromises.push(this.spotifyserv.searchTrack(this.songsService.songSearches[0])); 
    this.songsService.songSearches.shift(); 
    } 
    //Needs to wait until all requests^have been completed 
    Promise.all(searchPromises) 
    .then(() => this.spotifyserv.add_tracks_to_playlist()); 
}