Javascript - 链多个获取承诺

Question

我有这个方法执行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);
      });
    }
  }

现在我想这样称呼它

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

这里的最佳做法是什么？

Answer 1

如果你想要一个链请求，最好使用async / await：

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

在这里，您可以使用try / catch语法并包装特定请求：

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

你也可以包含几个请求。

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

看看有关链接承诺的链接：https://javascript.info/promise-chaining

这是核心理念：

它看起来像这样：

 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;

});

这个想法是结果通过.then处理程序链传递。

这里的流程是：

初始承诺在1秒（*）内解析，然后调用.then处理程序（**）。价值

它返回传递给下一个.then处理程序（***）......依此类推。