如何将简单的$http与回调转换为使用承诺

How to convert simple $http with callback to use promises

本文关键字:转换 回调 承诺 http 简单      更新时间:2023-09-26

我正在尝试理解angular中的promises,我有一个下面的例子,我想把它转换成使用promises,希望它能帮助我"啊哈!"

我在网上找到的所有例子都是使用服务/工厂等,我只是想知道最好的方法让这样简单的东西使用承诺。

angular.module('web').controller('CardsCtrl',function($scope, $http, $q){
    // Don't worry about how the variable "users" gets populated, let's just say it came into magical existance from a unicorn's horn.
    $scope.users = users;
    // Loop through all the users
    for(var i = 0; i < $scope.users .length; i++) {
      // THIS FAILS BECAUSE THE LOOP FINISHES BEFORE THE 1ST GET REQUEST FINISHES SO WE CAN'T REFERENCE THE I VARIABLE
      $http.get('http://uifaces.com/api/v1/random', function(face) {
        $scope.users[i].face = face.image_urls.mini;
      });
    }
});

你所拥有的不是承诺的问题。这只是典型的"循环闭包"问题。

修改如下:

for(var i = 0; i < $scope.users .length; i++) {
  (function(i) {
    $http.get('http://uifaces.com/api/v1/random', function(face) {
      $scope.users[i].face = face.image_urls.mini;
    });
  }(i));
}

我是这样写的:

 $q.all($scope.users.map(function(user){
      return $http.get('http://uifaces.com/api/v1/random').then(function(face){
           return user.face = face.image_urls.mini;
      });
 })).then(function(results) {
    // results contains the images actually used, so you can use it here too
 });