如何将 API 数据放入全局数组？ [复制]答案

【问题标题】：How can I put API data into a global array? [duplicate]如何将 API 数据放入全局数组？ [复制]
【发布时间】：2021-04-10 19:22:01
【问题描述】：

我正在开发一个非常简单的 covid 比较器项目，并且我已经完成了大部分工作，但存在一个问题。我想将结果推送到一个名为 data 的全局数组，但它不起作用，因为当数据被推送到数组时数据仍在加载。我已经插入了必要的代码，而不是全部。

var data = []; //global array
    function getData() {
 fetch(url + countryOne.value)
 .then(response => response.json())
  .then((result) => {
 var index = result.length - 1;
 var confirmed = result[index].Confirmed;
 textOne.textContent = result[index].CountryCode + " TOTAL CASES : " + confirmed;
 data.push(confirmed); //trying to push data

 
 })
 
    fetch(url + countryTwo.value)
 .then(response => response.json())
 .then((result) => {

 var index = result.length - 1;
 var confirmed = result[index].Confirmed;
 textTwo.textContent = result[index].CountryCode + " TOTAL CASES : " + confirmed;
 data.push(confirmed);
 
 })
 

}

如您所见，我正在获取数据、处理响应，然后将数据推送到全局数组中。问题是数据没有推入阵列。我相信我遇到了问题，因为数组是在加载来自 api 的数据之前推送的。数据加载完成后如何将数据推送到数组中？

【问题讨论】：

该 fetch 需要运行 .then，然后才能将其他 fetch 放入其中。
你能给我举个例子吗？
实际上，我会将最后一个fetch 放在它上面的.then 函数中，紧跟在data.push(confirmed); 之后。
好的，我试试
您期望的数据仅在异步基础上可用。是的，这意味着对依赖于异步结果的 data 数组的任何查询都必须在异步活动之后完成。

标签： javascript html arrays async-await

【解决方案1】：

或许你需要看到如下结构：

async function getData(){
  const data = [];
  let resp, jsonArray;
  resp = await fetch(url+countryOne.value); jsonArray = await resp.json();
  let index = jsonArray.length-1, confirmed = jsonArray[index].Confirmed;
  textOne.textContent = jsonArray[index].CountryCode + ' TOTAL CASES : ' + confirmed;
  data.push(confirmed);
  resp = await fetch(url+countryTwo.value); jsonArray = await resp.json(); 
  index = jsonArray.length-1; confirmed = jsonArray[index].Confirmed;
  textTwo.textContent = jsonArray[index].CountryCode + ' TOTAL CASES : ' + confirmed;
  data.push(confirmed);
  return data;
}
// get like
getData().then(data=>{
  console.log(data);
});
// or in another async function
async function test(){
  const data = await getData();
  console.log(data);
}
test();

【讨论】：

不起作用，但谢谢
有什么不好的？ url、countryOne 和 countryTwo 必须正确定义。除了你所展示的，我真的不知道你的数据是什么样子的。
是的，我已经正确定义了它们

【解决方案2】：

试试这样，await 获取并推送响应详细信息到data

const getData = async () => {
  const data = [];

  const f1_data = await fetch("https://swapi.dev/api/people/1/")
    .then((res) => res.json());
  data.push(f1_data.name);

  const f2_data = await fetch("https://swapi.dev/api/people/2/")
    .then((res) => res.json());
  data.push(f2_data.name);
  
  console.log(data);
};

getData();

【讨论】：