javascript - 为什么加载失败并且 promise 没有得到解决？

Question

此片段是更大指令的一部分:

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

        function preLoad() {

            var promises = [];

            function loadImage(src) {
                return $q(function (resolve, reject) {
                    var image = new Image();
                    image.src = src;
                    image.onload = function () {
                        resolve(image);
                        console.log('onload:', src);
                    };
                    image.onerror = function (e) {
                        reject(e);
                        console.log('onerror:', e);
                    };
                })
            }
            imageArray.forEach(function (src) {
                console.log('forEach:', src);
                promises.push(loadImage(src));
            });

            return $q.all(promises).then(function (results) {
                console.log('Promises resolved with', results);
                $scope.results = results;
            });
        }
        preLoad().then(function () {
            console.log('Ready for next activity...');
        });

此屏幕截图显示了我的控制台中的日志:

问题:为什么加载函数失败，因此 promise 没有得到解决？

Answer 1

问题出在这里:

imageArray.forEach(function(src) {
   ...
}

您将 imageArray 的一个元素传递给 forEach 回调 - 但这已经是一个 Image 对象。这就是为什么当您将其分配到新图像的 src 时，加载会失败。

最简单的解决方案是跳过代码开头的循环，并增强 forEach 回调，以便它可以与原始对象一起使用。事实上，使用 .map 返回结果会更干净:

promises = $scope.abbreviations.map(function(imgObj) {
   return loadImage(imgObj.imgPath);
});