Chaining Promises Cross Function Javascript

Question

I suspect I've fundementally misunderstood Javascript promises, any ideas?

I have a pretty function that queries a database containing music that looks like this:

function searchDatabaseForTrack(query,loadedResults){
    loadedResults = loadedResults || [];
    desiredResults = 100;
    if (loadedResults.length < desiredResults) {
        try {
            databaseApi.searchTracks(query, {"offset":loadedResults.length, "limit":"50", }).then(function(data){
                i=0
                if (data.tracks.items.length == 0) {
                    console.log(`Already loaded all ${loadedResults.length} tracks!`)
                    console.log(loadedResults)
                    return loadedResults;
                }
                else {
                    for (thing in data.tracks.items){
                        loadedResults.push(data.tracks.items[i]);
                        i=i+1;
                    }
                    console.log(loadedResults.length, " tracks collected");
                    searchDatabaseForTrack(query,loadedResults)
                }
                });
        } catch(err) {
            console.log("ERROR!", err)
            console.log(loadedResults)
            return loadedResults;
        }
    } else {
        console.log(loadedResults)
        return loadedResults;
    }
}

And then a bit later, I try to call and use the data retrieved.

 function getArtistTracks(artistName){
    searchDatabaseForTrack(artistName).then(function(data){
        console.log(songs);
        songs.sort(function(a,b){
            var c = new Date(a.track.album.release_date);
            var d = new Date(b.track.album.release_date);
            return d-c;
        });
        console.log("songs", songs);
        var newsongs=[];
        i=0
        for (song in songs) {
            newsongs.push(songs[i].track.uri);
            i++
        };
        return newsongs;
    });
}

What I'm trying to do is get the second function "getArtistTracks" to wait for the completion of the query in the first function. Now I could just call the databaseApi.searchTracks directly, but there's a limit of 50 tracks returned per result — which kind of screws me over.

Answer 1

searchDatabaseForTrack().then(...) shouldn't work since searchDatabaseForTrack() doesn't return a promise, so you can either return a promise or use an async function.

instead of a recursive function, you could simply call databaseApi in a for loop,

the desiredResult should be an argument and not hardcoded in the function,

async function searchDatabaseForTrack(query, desiredResults){
    let loadedResults = [], data, currOffset = 0;
    const iterations = Math.ceil(desiredResults / 50);

    for(let n = 0 ; n < iterations; n++){
        cuurOffset = n * 50;
        data = await databaseApi.searchTracks(query, {"offset":currOffset, "limit":"50", });

        if (data.tracks.items.length == 0) {
            console.log(`Already loaded all ${loadedResults.length} tracks!`)
            console.log(loadedResults)
            return loadedResults;
        }
        else {
            loadedResults = loadedResults.concat(data.tracks.items);
            console.log(loadedResults.length, " tracks collected");
        }
    }

    return loadedResults;
}

the rest should be fine as long as you add .catch() to handle errors ( as mentionned in previous answer ) which are thrown automatically without the need of the try/catch block :

function getArtistTracks(artistName, 100){
    searchDatabaseForTrack(artistName).then((songs) => {
      // your previous code
    })
    .catch((err) => {
      // handle error
    });
});

Answer 2

Have searchDatabaseForTrack use Promise.all to return the loadedResults after all results have been gotten. Also, make sure not to implicitly create global variables as you're doing with thing. For example, try something like this:

async function searchDatabaseForTrack(query) {
  const desiredResults = 100;
  const trackPromises = Array.from(
    ({ length: Math.ceil(desiredResults / 50) }),
    (_, i) => {
      const offset = i * 50;
      return databaseApi.searchTracks(query, { offset, limit: 50 });
    }
  );
  const itemChunks = await Promise.all(trackPromises);
  const loadedResults = itemChunks.reduce((a, { tracks: { items }}) => (
    [...a, ...items]
  ), []);
  return loadedResults;
};

and

searchDatabaseForTrack(artistName).then((loadedResults) => {
  // do stuff with loadedResults
})
.catch((err) => {
  console.log("ERROR!", err)
  // handle error
});