为什么加载失败，因此 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);
});

为什么加载失败，因此 promise 没有得到解决？

Why loading fails and consequently promises don't get resolved?

javascript

angularjs

angular-promise