Question

我正在尝试将json（歌曲）（对象）列表返回给我的react客户端。但是它返回一个空数组作为json。这就是我检索数据的方式。

let songs = [];
  fetch("https://api.spotify.com/v1/me/tracks", {
    method: "GET",
    headers: {
      Authorization: "Bearer " + req.user.accessToken
    },
    json: true
  })
    .then(res => res.json())
    .then(apiResponse => {
      let limit = apiResponse.limit;
      for (let i = 0; i < limit; i++) {
        Song.findOrCreate({
          where: {
            name: apiResponse.items[i].track.name,
            song_spotify_id: apiResponse.items[i].track.id,
            album: apiResponse.items[i].track.album.name,
            popularity: apiResponse.items[i].track.popularity,
            track_number: apiResponse.items[i].track.track_number,
            uri: apiResponse.items[i].track.uri
          }
        }).then(song => {
          songs.push(song);
        });
      }
    })
    .catch(function(error) {
      return {
        type: "ERROR ON FETCH",
        api_response: { success: false }
      };
    });

  console.log("songs: *********************" + songs);
  res.status(200).json(songs);
});

这是我的react api提取：

const requestMySongs = async () => {
  const data = await fetch("/mysongs").catch();
  console.log(data);
  const jsoned = await data.json();
  console.log(jsoned);
  let five = [];
  // only 5 songs
  for (let i = 0; i < 5; i++) {
    five.push(jsoned[i]);
  }
  console.log(five);
  return five;
};

当我对控制台日志进行json处理时，它会显示以下内容：

[]

奇怪的是，我有两个版本。一个版本就是这个版本，它仅要求Spotify API包含20首歌曲。我的另一个版本几乎完全相同，只是它循环播放并询问整个歌曲列表（获取50首，保存50首，请求Spotify另50首，依此类推），并且此其他版本有效。代码完全相同，但是问题在于，它要花很长时间才能加载，因此我尝试简化它，但是它不起作用。

感谢您提供的任何帮助。

Answer 1

这是因为您必须先等待所有承诺，然后才能发送回复。

实际上，您发送了响应，但是数据库内部查询过程尚未运行。

let songs = [];
  fetch("https://api.spotify.com/v1/me/tracks", {
    method: "GET",
    headers: {
      Authorization: "Bearer " + req.user.accessToken
    },
    json: true
  })
    .then(results => results.json())
    .then(apiResponse => {
      let limit = apiResponse.limit;
      let promises = [];

      for (let i = 0; i < limit; i++) {
        const myPromise = new Promise((resolve, reject) => {
        Song.findOrCreate({
          where: {
            name: apiResponse.items[i].track.name,
            song_spotify_id: apiResponse.items[i].track.id,
            album: apiResponse.items[i].track.album.name,
            popularity: apiResponse.items[i].track.popularity,
            track_number: apiResponse.items[i].track.track_number,
            uri: apiResponse.items[i].track.uri
          }
        }).then(song => {
          songs.push(song);
          resolve(true)
        });
        });

        promises.push(myPromise);
      }

      Promise.all(promises)
      .then(() => {
          console.log("songs: *********************" + songs);
          res.status(200).json(songs);
      });

    })
    .catch(function(error) {
      return {
        type: "ERROR ON FETCH",
        api_response: { success: false }
      };
    });

});

返回一个空的json即使它不为空

1 个答案: