javascript - 有没有办法在导入之前将来自 api 调用的数据插入到对象中？在我能够使用数据创建变量之前，代码正在运行

Question

我正在尝试创建变量并用来自 json api 调用的数据填充它们，但是代码在可以进行 api 调用之前运行，导致在我尝试使用它们时变量显示为空。在将对象导入到不同页面之前，我不知道如何用来自 api 调用的数据完成填充我的对象。

我知道我的问题是大部分代码在我能够完成设置从 api 调用获取数据的变量之前运行，我不知道如何用 api 调用的变量填充 barChartData。任何帮助将不胜感激

//调用json api

async function fetchJSONAsync(url) {
  let response = await fetch(url);
  let body = await response.json();
  return body;
}

//创建movie1变量

let movie1 = fetchJSONAsync('https://facebook.github.io/react-native/movies.json').then((apiData) => {
  movie1 = apiData.movies[0].title;
  console.log(movie1); //Logs the correct data since it waits before running
});

console.log(movie1); //Doesnt log the correct data cause code runs before movie1 is done redefining itself

//条形图数据 -> 我想将来自 api 调用的数据插入其中(来自 https://www.npmjs.com/package/react-native-chart-kit 的简单条形图)console.log(movie1) 结果为“{ _40: 0, _65: 0, _55: null, _72: null }”，我假设是因为 api 调用在被扔进 barChartData 之前从未完成，这给了我不变违规:对象无效作为 React Child 错误。

const barChartData = {
  labels: [movie1', 'Movie Title 2', 'Movie Title 3'], //<<<Insert movie1 variable in here
  datasets: [{
    data:
    [
      200, //Irrelevant
      250, //Irrelevant
      255 //Irrelevant
    ]
  }]
}

再次提前感谢您提供的任何帮助。

Answer 1

你也可以这样做:

yourMethodName = async () => {
    const movie1 = await fetchJSONAsync('https://facebook.github.io/react-native/movies.json');
    console.log(movie1.movies[0].title);
}