Javascript-链接多个提取承诺

Question

I have this method who performs 3 window.fetch

   const API_URL = 'http://localhost:3000/'
  , API = {
    'getArtistLyric': artist => {
      return fetch(`${API_URL}artist?name=${artist}`)
      .then(res => res.json())
      .then(res => {
        const artistID = JSON.parse(res).message.body.artist_list[0].artist.artist_id;

        console.log('Artist ID is:', artistID);

        fetch(`${API_URL}artist/albums/?artist_id=${artistID}`)
        .then(resp => resp.json())
        .then(resp => {
          const trackID = JSON.parse(resp).message.body.album_list[0].album.album_id;

          console.log('Random Track ID is:', trackID);

          fetch(`${API_URL}artist/album/songsnippet?track_id=${trackID}`)
          .then(response => response.json())
          .then(response => {
            const lyricSnippet = JSON.parse(response).message;

            console.log('Track Id lyric snippet is:', lyricSnippet);
          })
          .catch(err => {
            console.error(err);
          });
        })
        .catch(err => {
          console.error(err);
        });
      })
      .catch(err => {
        console.error(err);
      });
    }
  }

Now i want to call it like this

API.getArtistLyric('Prodigy').then(res).catch(err);

What's the best practice here?

Answer 1

If you want to make a chain requests it's better to use async/await :

async func(){
    let response = await /* some request */
    let res = await /* another request */ 
    ...
    return results;
}

Here you can use try/catch syntax and wrap specific request :

try {
    let response = await... 
} catch ( exception)  {
   ...
}

Also you can wrap a couple of requests.

Answer 2

 (async() => { const API_URL = 'http://localhost:3000/'; const API = { getArtistLyric: async(artist) => { try { const res = await fetch(`${API_URL}artist?name=${artist}`); const artistID = JSON.parse(res.json()).message.body.artist_list[0].artist.artist_id; console.log('Artist ID is:', artistID); const resp = await fetch(`${API_URL}artist/albums/?artist_id=${artistID}`); const trackID = JSON.parse(resp.json()).message.body.album_list[0].album.album_id; console.log('Random Track ID is:', trackID); const response = await fetch(`${API_URL}artist/album/songsnippet?track_id=${trackID}`); const lyricSnippet = JSON.parse(response.json()).message; console.log('Track Id lyric snippet is:', lyricSnippet); return lyricSnippet; } catch (e) { console.error(e); } } } try { const art = await API.getArtistLyric('Prodigy'); console.log(art); } catch (e ){ console.error(e); } })() 

Answer 3

Check out this link regarding chaining promises: https://javascript.info/promise-chaining

Here's the core idea:

It looks like this:

  new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) }).then(function(result) { // (**) alert(result); // 1 return result * 2; }).then(function(result) { // (***) alert(result); // 2 return result * 2; }).then(function(result) { alert(result); // 4 return result * 2; }); 

The idea is that the result is passed through the chain of .then handlers.

Here the flow is:

The initial promise resolves in 1 second (*), Then the .then handler is called (**). The value that

it returns is passed to the next .then handler (***) …and so on.