即使它不是空的，也返回一个空的 json答案

【问题标题】：returning an empty json even though it's not empty即使它不是空的，也返回一个空的 json
【发布时间】：2019-11-11 01:32:48
【问题描述】：

我正在尝试将带有歌曲（对象）列表的 json 返回给我的反应客户端。但它返回一个空数组作为 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 首，依此类推），而这个另一个版本可以工作。代码完全相同，但问题是加载时间很长，所以我试图简化它，但它不起作用。

感谢您提供的任何帮助。

【问题讨论】：

标签： reactjs express sequelize.js

【解决方案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 }
      };
    });

});

【讨论】：