javascript - For循环循环中的总增量，但之后打印时返回0

Question

我正在创建一个 Alexa 应用程序，充当股票投资组合管理器。我有一个函数，首先检索所有股票以及属于用户的股票数量。对于每只股票，我必须使用 axios 查询 API 来获取股票的值(value)，这意味着 axios get 语句嵌套在 forEach 循环中。然后，我有一个 TotalPrice 变量，该变量使用股票的总价递增；价格乘以 x 拥有的股票数量即可得出

在 forEach 循环结束时，我想打印总价格，这将是投资组合的全部值(value)

当我在请求语句中打印出totalPrice时，它会正确添加之前的总股票价格，但是如果我在forEach循环之后打印totalPrice，它会打印0

var grandTotal = 0;
data.Items.forEach(function(element,index,array) {  
   var stock = element.Stock;
   var number = element.Number;
   var url = `www.api.com/${stock}`;

   const getDataValues = async url => {
     try {
      const response = await axios.get(url);
      const data = response.data;
      var Price = data.PRICE;
      return Price;
    } catch (error) {
      console.log(error);
    }
  };

 let promiseObject = getDataValues(url);
 promiseObject.then(function(result) {
     var totalPriceofStocks = result * amount;
     grandTotal += totalPriceOfStocks;
     console.log(`{grandTotal}`);        // This bit accumulates correctly
 });
});
console.log(`The grand total is: ${grandTotal}`);

令我困惑的是，虽然数据是异步的，但我认为使用 .then 会等到数据被检索为止。这似乎是在 forEach 循环中打印总数时的情况。其他有趣的事情是，在控制台中，首先打印“总计为:0”。

Answer 1

最后的 console.log 打印 0，因为它是在你的 Promise 启动后立即执行的(尚未完成)。

为了等到所有的 promise 完成，那么你可以:

1. 将 promise 存储在列表中
2. 使用Promise.all ，它将 Promise 列表作为参数，并在所有 Promise 都已解决时解析(在您的情况下，当所有 axios 请求完成时)。

我添加了代码的修改示例，以展示如何执行此操作。由于我没有您的数据，因此无法测试它，但希望它有效。

const promises = []

const getDataValues = async url => {
  try {
    const response = await axios.get(url);
    const data = response.data;
    var Price = data.PRICE;
    return Price;
  } catch (error) {
    console.log(error);
  }
};

var grandTotal = 0;
data.Items.forEach(function(element,index,array) {  
  var stock = element.Stock;
  var number = element.Number;
  var url = `www.api.com/${stock}`;

  let promiseObject = getDataValues(url);
  promiseObject.then(function(result) {
    var totalPriceofStocks = result * amount;
    grandTotal += totalPriceOfStocks;
    console.log(`${grandTotal}`);        // This bit accumulates correctly
    return totalPriceOfStocks
  });
  promises.push(promiseObject)
});

Promise.all(promises)
  .then(function (resultValues) {
    console.log(`The grand total is: ${grandTotal}`);
    let resultSum = 0;
    resultValues.forEach(function (value) {
      resultSum += value;
    })
    console.log(`This is also the total: ${resultSum}`);
  })

另请注意，我已向您的 Promise 对象添加了一个返回值。我这样做是为了展示另一种累积总计的方法，而不是依赖全局值。这背后的逻辑是，当 Promise 返回一个值时，该值可用于传递给“then”链式函数的函数。在本例中，我们使用 Promise.all，Promise.all 将 Promise 的返回值列表传递给其“then”函数。因此，我们可以将 returnValues 参数的元素相加来计算总计。