javascript - 加载所有图像时解决 promise

Question

我使用以下代码预加载图像:

    function preLoad() {
        var deferred = $q.defer();
        var imageArray = [];
        for (var i = 0; i < $scope.abbreviations.length; i++) {
            imageArray[i] = new Image();
            imageArray[i].src = $scope.abbreviations[i].imgPath;
        }
        imageArray.forEach.onload = function () {
            deferred.resolve();
            console.log('Resolved');
        }
        imageArray.forEach.onerror = function () {
            deferred.reject();
            console.log('Rejected')
        }
        return deferred.promise;
    }
    preLoad();

我认为图像都已正确加载，因为我可以看到“已解决”日志。

后来有人指出，上面的代码并不能保证在 resolve promise 之前加载所有图像。实际上，只解决了第一个 promise 。

有人建议我改用 $q.all 应用于 promise 数组。这是结果代码:

    function preLoad() {
        var imageArray = [];
        var promises;
        for (var i = 0; i < $scope.abbreviations.length; i++) {
            imageArray[i] = new Image();
            imageArray[i].src = $scope.abbreviations[i].imgPath;
        };

        function resolvePromises(n) {
            return $q.when(n);
        }
        promises = imageArray.map(resolvePromises);
        $q.all(promises).then(function (results) {
            console.log('array promises resolved with', results);
        });
    }
    preLoad();

这行得通，但我想了解:

1. 每个函数发生了什么；
2. 为什么我需要 $q.all 来确保在解决 promise 之前加载所有图像。

relevant docs有点神秘。

Answer 1

看看这个 plunkr .

你的功能:

function preLoad() {

    var promises = [];

    function loadImage(src) {
        return $q(function(resolve,reject) {
            var image = new Image();
            image.src = src;
            image.onload = function() {
              console.log("loaded image: "+src);
              resolve(image);
            };
            image.onerror = function(e) {
              reject(e);
            };
        })
    }

    $scope.images.forEach(function(src) {
      promises.push(loadImage(src));
    })

    return $q.all(promises).then(function(results) {
        console.log('promises array all resolved');
        $scope.results = results;
        return results;
    });
}

这个想法与 Henrique 的回答非常相似，但是 onload 处理程序用于解决每个 promise ，而 onerror 用于拒绝每个 promise 。

回答您的问题:

1) promise 工厂

$q(function(resolve,reject) { ... })  

构造一个 Promise。传递给 resolve 函数的任何内容都将在 then 函数中使用。例如:

$q(function(resolve,reject) {
     if (Math.floor(Math.random() * 10) > 4) {
         resolve("success")
     }
     else {
         reject("failure")
     }
}.then(function wasResolved(result) {
    console.log(result) // "success"
}, function wasRejected(error) {
    console.log(error) // "failure"
})

2) $q.all 传递了一个 promise 数组，then 接受一个函数，该函数传递一个数组，其中包含所有原始 promise 的决议。