javascript - 如何从一项 promise 到另一项 promise 中获取更多数据？

Question

我有一个 promise 依赖于另一个 promise 的返回值。我已成功将该值传递给第二个 Promise，但在第一个 Promise 中创建了其他数据，我希望以某种方式将其输入到第二个 Promise 中。

这是我的代码:

const getAlbumInfo = async (album, artist) => {
        let hostname = 'http://www.musicbrainz.org';
        let path = `/ws/2/release-group/?query=release:${album}%20AND%20artist:${artist}&fmt=json`;
        let res = await fetch(hostname + path);
        return res.json();
};


const getAlbumArt = async (albumInfo) => {
    let res = await fetch(`${albumInfo.url}`);
    return res.json();
};    


let artist = '', album = '';

getAlbumInfo(album, artist)
    .then((res) => {
        const metadata = {
            album: res['album'],
            artist: res['artist'],
            url: res['url']
        };

        return getAlbumArt(metadata);
    })
    .then((res) => {
        console.log(res);  // prints result from getAlbumArt

        // I also need the contents of metadata here
    })
    .catch(e => { console.error(e); });

因此，我在第一个 Promise 中获取专辑元数据，其中包含一个 URL，然后我在该 URL 上运行提取操作，这会返回第二个 Promise。问题是我需要访问第二个 promise 中的专辑元数据。

由于我将元数据返回/传递到第二个 Promise 中，因此我尝试在 getAlbumArt() 内使用 Object.assign() 来组合元数据和获取结果，但这似乎不起作用。

Answer 1

有多种方法可以做到这一点，您可以使用await:

const getAlbumInfo = async(album, artist) => {
  let hostname = 'http://www.musicbrainz.org';
  let path = `/ws/2/release-group/?query=release:${album}%20AND%20artist:${artist}&fmt=json`;
  let res = await fetch(hostname + path);
  return res.json();
};


const getAlbumArt = async(albumInfo) => {
  let res = await fetch(`${albumInfo.url}`);
  return res.json();
};


let artist = '',
  album = '';

const getAll = async() => {
  const res1 = await getAlbumInfo(album, artist);
  const metadata = {
    album: res['album'],
    artist: res['artist'],
    url: res['url']
  };
  const res2 = await getAlbumArt(metadata);

  // here you have access to both responses (res1 and res2) and the created metadata object.
}

如果您使用此功能，则应将调用包装在 try..catch.. 中。

另一种选择是将第二个 Promise 中的元数据与响应一起传递:

const getAlbumInfo = async(album, artist) => {
  let hostname = 'http://www.musicbrainz.org';
  let path = `/ws/2/release-group/?query=release:${album}%20AND%20artist:${artist}&fmt=json`;
  let res = await fetch(hostname + path);
  return res.json();
};


const getAlbumArt = async(albumInfo) => {
  let res = await fetch(`${albumInfo.url}`);
  res = await res.json();
  return {
    res,
    albumInfo
  };
};


let artist = '',
  album = '';

getAlbumInfo(album, artist)
  .then((res) => {
    const metadata = {
      album: res['album'],
      artist: res['artist'],
      url: res['url']
    };

    return getAlbumArt(metadata);
  })
  .then((o) => {
    console.log(o.res, o.albumInfo);
  })
  .catch(e => {
    console.error(e);
  });

第三个选项是在第一个 Promise 的回调函数中解析第二个 Promise:

getAlbumInfo(album, artist)
  .then((res) => {
    const metadata = {
      album: res['album'],
      artist: res['artist'],
      url: res['url']
    };

    getAlbumArt(metadata)
      .then(res2 => {
        // here you can access res, res2 and metadata
      })
      .catch(..);
  })
  .catch(..);