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

Question

我的代码可以工作，但它给了我重复的数据，而且我似乎找不到解决方案。

这是我的代码。

vm.peoplev2 值

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

Controller

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);
        }
   });
});

上传服务

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)
  })
});

这会创建一个 Promise 数组，并等待所有 Promise 执行后再返回最终结果。

Plunk