Hi,
I’m creating a little hobby project to learn more about async/await and promises. The project is to simply search and return lyrics using the MusixMatch API.
I have 2 functions that do the searching. searchSong() finds the trackID and passes that to searchLyrics() which ultimately returns the lyrics. The API methods are working fine when I test them on Postman. However, when I run them in my JS code the functions take a long time to return the lyrics whereas Postman returns them almost instantaneously.
Can anyone point me in the right direction? I’ve spent longer than I’d like to admit figuring out a way to solve this issue.
searchBtn.addEventListener('click', (e) => {
console.log('search submitted');
searchSong(songInput, artistInput, musixApi)
.then((res) => {
console.log('searching');
if (res.message.header.status_code === 200) {
searchLyrics(res.message.body.track.track_id)
.then((res) => {
lyricsDisplay.textContent = res.message.body.lyrics.lyrics_body;
})
.catch((err) => console.log(err));
}
})
.catch((err) => console.log(err));
e.preventDefault();
});
async function searchSong(songInput, artistInput, musixApi) {
let proxyurl = 'https://cors-anywhere.herokuapp.com/';
let url = 'https://api.musixmatch.com/ws/1.1/matcher.track.get?';
let artist = artistInput;
let song = songInput;
const response = await fetch(
`${proxyurl}${url}apikey=${musixApi}&q_artist=${artist}&q_track=${song}`
);
const responseData = await response.json();
return responseData;
}
async function searchLyrics(trackId, apikey = musixApi) {
let proxyurl = 'https://cors-anywhere.herokuapp.com/';
let url = 'https://api.musixmatch.com/ws/1.1/track.lyrics.get?';
const response = await fetch(
`${proxyurl}${url}apikey=${musixApi}&track_id=${trackId}`
);
const responseData = await response.json();
return responseData;
}