Question

我试图获取与当前现有数据相关的一些数据。用例如下：我有一个json数组，计算每个组的所有事务的数量，我必须为每个组做一个axios.get请求（要求这个组我需要groupIds，存在于组中数组）。但我认为我卡住了因为我真的不知道如何异步迭代for循环。这是我做的：

repareTransactionAmouts: function(){
     for(var i = 0; i < this.transactionGroups.length; i++){
         var groupId = this.transactionGroups[i].groupId
         this.transactionsGroupsCount = i;
       Promise.all([this.calculateTransactionAmounts(groupId)]).then( promiseData =>  {

    this.transactionGroups[this.transactionsGroupsCount].totalAmount=promiseData[0]

     if(this.transactionsGroupsCount == this.transactionGroups.length){
       this.transactionGroups.sort(this.GetSortOrder("totalAmount"))
       this.amountsCalculated = true;
     }
    }
 }
 },

transactionsGroups是我带有事务的过滤组数组，transactionsGroupCount是一个全局变量，用于将transactionamounts添加到[transactionsGroupCount]上的数组位置。当所有组都填充了amout时，我想对它进行排序并设置一个布尔值。

接下来是函数calculateTransactionAmounts：

    calculateTransactionAmounts: function(groupId){
return new Promise((resolve, reject) => {
  var transactions = []
  var amount = null
      axios
        .get(webServiceURL + "/groups/" + groupId, {
          headers: { Authorization: "0 " + this.authToken }
        })
        .then(response => {
            transactions = response.data.payload.transactions;


console.log("Desired Group: " + JSON.stringify(response.data.payload));
                for(let j = 0; j < transactions.length; j++){
                  amount += transactions[j].amount
                  console.log("Transactiongroup" )                                   
                  console.log(JSON.stringify
                  (this.transactionGroups[this.transactionsGroupsCount]))                                             
              resolve(amount)
            }              
        })
        .catch(e => {
          console.log("Errors get groupids: " + e);
          reject(e)
        });     
      })},

这里的主要问题是，在调用函数calculateTransactionAmounts之前完全处理for循环，所以我有一些调用，但都具有相同的groupId。有些奇特的东西正在发生，我无法解释原因：输出＆＃34; Desired Group＆＃34;显示我在我的数组中的每个组，但是＆＃34; this.transactionGroups [this.transactionsGroupsCount]＆＃34;对于每次迭代，我总是输出相同的组。

如果有帮助：我正在开发一个vue2应用程序并需要这个获取的数量数据来显示一些交易图表

Answer 1

分析您的代码，可以大大简化如下

prepareTransactionAmouts() {
    return Promise.all(this.transactionGroups.map((group, i) => 
        this.calculateTransactionAmounts(group.groupId)
        .then(promiseData => group.totalAmount = promiseData)
    )).then(results => {
        this.transactionGroups.sort(this.GetSortOrder("totalAmount"));
        this.amountsCalculated = true;
    });
},
calculateTransactionAmounts(groupId) {
    return axios.get(webServiceURL + "/groups/" + groupId, {
        headers: {
            Authorization: "0 " + this.authToken
        }
    })
    .then(response => 
            response.data.payload.transactions.reduce((total, { amount }) => total + amount, 0)
    );
}

代码中的更改包括

在将this.transactionGroups映射到每次调用{（1}}
一旦上述所有承诺得到解决，执行this.calculateTransactionAmounts和this.transactionGroups.sort - 而不是跟踪索引，因为这无论如何都不能解释异步
删除amountsCalculated = true

new Promsie

使用Array＃reduce

calculateTransactionAmounts

一般情况下，使用适用的现代（ES2015 +）javascript

异步数据获取for循环javascript

1 个答案: