Wie führe ich eine HTTP-Anfrage nur aus, nachdem eine Liste von n HTTP-Anfragen ausgeführt und abgeschlossen wurde?

Question

Ich benutze Spotify's Web Api.

Ich habe eine Reihe von SongSearches. Und für jede songSearch in songSearches wird eine Anfrage gemacht, nach diesen songs zu suchen und sie zu einem Array von Songs hinzuzufügen, die die spotify ID des Tracks enthalten. Ich brauche alle diese IDs auf einmal, damit ich eine POST-Anfrage ausführen kann, um alle diese Tracks zu einer Playlist hinzuzufügen. Daher müssen alle Suchanfragen abgeschlossen sein, bevor die POST-Anfrage gestellt wird.

All dies muss auf Knopfdruck geschehen.

ausgeführt-Code, wenn die Schaltfläche geklickt wird:

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 
} 

Suche Track-Funktion:

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); 
     } 
    ); 
} 

Tracks In Funktion

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); 
} 

Zur Playlist Ich verstehe, dass ich wahrscheinlich zu wollen, mit Promise.all() irgendwo, aber ich bin mir nicht sicher, wie/wo es zu verwenden ist

Answer 1

Wie Sie erwähnen, Promise.all() könnte Ihnen helfen, wenn searchTrack() eine Promise zurückgibt. So etwas wie folgt aus:

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

und die onSubmit

wie ein Zauber

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()); 
}