Angular JS (1.2.26) 在 forEach 循环中承诺

Question

我有一个 angular.forEach 循环，它遍历图像配置对象，以便根据配置中的 URL 创建 javascript Image() 对象。

我不希望在所有图像都正确加载之前返回结果图像。如何通过使用 Angular 承诺来实现这一目标？

考虑以下（简化的）代码 sn-p：

function getImages(imageConfigurations) {
    var images = [];

    angular.forEach(imageConfigurations, function (config) {
        var imageObject = loadImageFromUrl(config.url);

        var imageData = {
            name: config.name,
            order: config.order,
            image: imageObject
        };

        images.push(imageData);

    });

    //Do not return this untill all of the image objects from forEach loop 
    //have fired their 'onload' event
    return images;

}

function loadImageFromUrl(url) {
    var imageObj = new Image();

    imageObj.onload = function () {
        //Resolve promise?
    };

    imageObj.src = url;
} 

Answer 1

以下要求您注入$q 服务...

您可以做的第一件事是将图像加载包装在一个承诺中，例如

function loadImageFromUrl(url) {
    return $q(function(resolve) { // ignoring error conditions for now
        var imageObj = new Image();

        imageObj.onload = function () {
            resolve(imageObj);
        };

        imageObj.src = url;
    });        
}

然后，您可以使用 $q.all 等待所有的 Promise 解决

function getImages(imageConfigurations) {
    // map imageConfigurations to an array of promises
    var promises = imageConfigurations.map(function(config) {
        return loadImageFromUrl(config.url).then(function(imageObj) {
            // chain the loadImageFromUrl promise to create the
            // imageData object and return it to resolve the promise
            return {
                name: config.name,
                order: config.order,
                image: imageObj
            };
        });
    });

    return $q.all(promises);
}

当该承诺解决时，您将拥有一个 imageData 对象数组

getImages(configs).then(function(imageDataArray) {
    // tada!
});

---

这是 Angular 1.2.x 所需的 loadImageFromUrl 版本。见https://code.angularjs.org/1.2.26/docs/api/ng/service/$q

function loadImageFromUrl(url) {
    var deferred = $q.defer(),
        imageObj = new Image();

    imageObj.onload = function () {
        deferred.resolve(imageObj);
    };
    imageObj.src = url;

    return deferred.promise;
}

Answer 2

注意 getImages 现在是异步的 -

  function getImages(imageConfigurations) {
     var deferred = $q.defer();
     var images = [];
     var imagePromises = imageConfigurations.map(function (config) {
         var imagePromise = loadImageFromUrl(config.url);
         return imagePromise;
     });

     return $q.all(imagePromises).then(function(images){
          return images.map(function(imageObject){
             // create image object 
           })
        });
 }  

从 url 加载图像现在也是异步的 -

   function loadImageFromUrl(url) {
         var defer = $q.defer();
         var imageObj = new Image();

         imageObj.onload = function () {
            defer.resolve("image has been loaded - yay");
         };

         imageObj.src = url;

         return defer.promise;
     }

$q 文档请到这里 - https://docs.angularjs.org/api/ng/service/$q

祝你好运