angular.foreach在发送get请求时给我重复数据

Question

我的代码正在运行，但它给了我一个重复数据，我似乎无法找到解决方案。

这是我的代码。

vm.peoplev2值

vm.peoplev2 = [{'userId': 'admin'},{'userId':'jonas'},{'userId':'maria'},{'userId':'johncena'},{'userId':'lorenz'}];

控制器

angular.forEach(vm.peoplev2, function (value, key) {
      console.log(value.userId);
      uploadService.getCurrentImg(value.userId).then(function (data) {
        if (value.userId === data.data.user) {
          vm.img.push(data.data);
          console.log(vm.img);
        }
   });
});

uploadService

function getCurrentImg(data) {
   return $http.get('/api/img/' + data );
}

路由

router.get('/img/:id', function (req, res) {
    Img.findOne({ user: req.params.id }, function (err, img) {
        if (err) {
            res.status(404).send(err);;
        } else {
            res.status(200).send(img);
        }
    });
});

这是vm.img（object）中的结果：

它取得了jonas和lorenz 2x。如何解决这个问题？

Answer 1

异步操作和循环可能无法预测。尝试以下几点：

（使用$timeout来电替换服务中的$http

angular.module('plunker', [])
.service('service', function($timeout) {
  this.get = function(person) {
    return $timeout(() => {
      return {
        '_id': ~~Math.random(),
        'name': person.userId
      }
    }, 250)
  }
})
.controller('MainCtrl', function(service, $q) {
  this.peoplev2 = [{
    'userId': 'admin'
  }, {
    'userId': 'jonas'
  }, {
    'userId': 'maria'
  }, {
    'userId': 'johncena'
  }, {
    'userId': 'lorenz'
  }];

  $q.all(this.peoplev2.map(person => service.get(person)))
  .then(results => {
    console.log(results)
  })
});

这将创建一个promises数组，并在返回最终结果之前等待所有执行。

Plunk