Javascript：附加到数组不起作用

Question

我正在尝试将从 api 调用（承诺）中获得的数字附加到数组中。当我测试数组的长度时，它总是返回 1，好像每个 api 调用都会重置数组并输入一个新数字。

代码如下：

API 调用

 wiki()
  .page("COVID-19_pandemic_in_Algeria")
  .then((page) => page.fullInfo())
  .then((info) => {
    (data.confirmed.value = info.general.confirmedCases),
      (data.recovered.value = info.general.recoveryCases),
      (data.deaths.value = info.general.deaths);

   });

const data = {
  confirmed: { value: 0 },
  deaths: { value: 0 },
  recovered: { value: 0 },
};

现在我想将死亡人数放入一个数组中，这样我就有了接下来几天要跟踪的数字列表。

  function countStats() {
  const counter = [];
  var deathCounter = data.deaths.value;
  counter.push(deathCounter);
  console.log(counter.length);
  return counter;
}

countStats();

每次运行函数（wiki() 和 countStats()）时，计数器数组的长度始终为 1。这是为什么呢？

Answer 1

除非...

1. 数据源提供多日数据，或
2. 您将运行一个非常长的 javascript 会话（这是不切实际且不安全的），

...那么 javascript 本身无法满足处理/显示多天产生的数据的目标。

假设数据源提供了当天正确的数据。

您将需要一个永久的数据存储，可以在其中积累抓取的数据，并按需检索。您为永久数据存储选择的确切内容取决于您建议运行 javascript 的环境（主要是客户端浏览器或服务器端节点），而该选择超出了本问题的范围。

你的主函数可能是这样的......

function fetchCurrentDataAndRenderAll() {
    return fetchCurrentData()
    .then(writeToFile)
    .then(readAllFromFile)
    .then(data => {
        // Here, you have the multi-day data that you want.
        return renderData(data); // let's assume the data is to be rendered, say as a graph.
    })
    .catch(error => {
        // something went wrong
        console.log(error);
        throw error;
    });
}

...和支持的功能可能是这样的：

function fetchCurrentData() {
    return wiki() // as given in the question ...
    .page("COVID-19_pandemic_in_Algeria")
    .then(page => page.fullInfo())
    .then(info => ({
        'timeStamp': Date.now(), // you will most likely need to timestamp the data 
        'confirmed': info.general.confirmedCases,
        'recovered': info.general.recoveryCases,
        'deaths': info.general.deaths
    }));
}

function writeToFile(scrapedData) {
    // you need to write this ...
    // return Promise.
}

function readAllFromFile() {
    // you need to write this ...
    // return Promise.
}

function renderData(data) {
    // you need to write this ...
    // optionally: return Promise (necessary if rendering is asynchronous).
}

Answer 2

您可以使用Promise.all()。我认为您不会请求相同的页面 10 次，而是在每次调用中请求不同的页面，例如const Pages = ['COVID-19_pandemic_in_Algeria','page2','page3','page4','page5','page6','page7','page8','page9','page10']。然后你可以按如下方式进行 10 次调用：

//const wiki = ......
const Pages = ['COVID-19_pandemic_in_Algeria','page2','page3','page4','page5','page6','page7','page8','page9','page10'];
let counter = [];

Promise.all(
    Pages.map(Page => wiki().page(Page))
)
    .then(results => {
        for (page of results) {
            let infoGeneral = page.fullInfo().general;
            counter.push(infoGeneral.deaths);
        }
        console.log( counter.length ); //10
        console.log( counter ); //[10 deaths results one for each page]
    })
    .catch(err => console.log(err.message));