reactjs - 即使它不是空的，也返回一个空的 json

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

当我控制台日志 jsoned 时，它出现以下内容:

[]

奇怪的是，我有两个版本。一个版本是这个版本，它只请求 20 首歌曲的 Spotify api。我的另一个版本几乎完全相同，只是它循环并询问整个歌曲列表(获取 50 首，保存 50 首，请求 Spotify 获取另外 50 首歌曲，等等)，而这个其他版本有效。代码完全一样，但问题是加载时间很长，所以我试图简化它，但它不起作用。

我感谢提供的任何帮助。

Answer 1

这是因为您必须在发送响应之前等待所有 promise 。

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

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

});