Question

我有一个angular.forEach循环，它迭代图像配置对象，以便根据配置中的URL创建javascript Image（）对象。

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

考虑以下（简化）代码段：

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等待所有承诺解决

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

从网址加载图片现在也是异步 -

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

$ p文档的

转到此处 - https://docs.angularjs.org/api/ng/service/ $ q

祝你好运

Angular JS（1.2.26）承诺在forEach循环中

2 个答案: