Javascript - 链多个获取承诺

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript - 链多个获取承诺相关的知识,希望对你有一定的参考价值。

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

这里的最佳做法是什么?

答案

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

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

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

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

你也可以包含几个请求。

另一答案

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

})() 
另一答案

看看有关链接承诺的链接: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处理程序(***)......依此类推。

以上是关于Javascript - 链多个获取承诺的主要内容,如果未能解决你的问题,请参考以下文章

Javascript,如何等待多个承诺[重复]

如何在 Fetch 的承诺链之外获取响应数据? [复制]

javascript中的链承诺

Javascript竞争条件多个承诺连接字符串

javascript 取消承诺链

通过 Javascript 中的承诺链传递状态都有哪些模式? [复制]