Как загрузить изображения с помощью цепочек Promises

Question

У меня возникли проблемы с загрузкой изображений с помощью сценария прикованных обещаний - они заканчиваются неопределенно до конца. У меня также есть ошибка 404, которую я не совсем понимаю, поскольку я подтвердил, что все источники являются допустимыми, но признаю, что я все еще noob для отладки в асинхронном контексте. Вот fiddle в вопросе. Я уже переваривал это на пару дней и мог использовать толчок или два, чтобы заставить меня двигаться в правильном направлении. Я думаю, что это может быть проблемной области:

function loadImagePromises() { 
    var imageLoadPromises = []; 
    for (var i = 0; i < sources.length; i++) { 
     imageLoadPromises.push( 
      imgLoad(sources[i]).then(function(response) { 
       var myImage = new Image(); 
       myImage.src = response; // response is a blob 
      }, function(Error) { 
       console.log("There was an error when the image was loaded after download: " + Error); 
      })); 
    } 
    console.log(imageLoadPromises); 
    return imageLoadPromises; 
} 

В контексте, я пишу скрипт загрузки изображений с помощью обещаний по программе three.js у меня есть. Не нужно загружать изображения в DOM - я буду использовать их позже в качестве текстур в визуализации WebGL.

Примечание: Вот раньше и проще fiddle работать от конца до конца и вывода на DOM.

Answer 1

Вероятно, некоторые другие соображения здесь, но ваш обработчик успеха ничего не возвращает в явном виде, поэтому он неявно возвращение undefined:

function(response) { 
    var myImage = new Image(); 
    myImage.src = response; 
    // if you want the promise to resolve to a useful value put 
    // it below, with whatever you want e.g: 
    return myImage; 
} 

RE: Ошибки: Вы должны, вероятно, не тень Error в обработчике ошибок, просто использование нижний регистр error. Кроме того, при использовании console.log/console.error вы можете использовать , для соединения частей сообщения, которое обычно представляет более богатое сообщение, чем строка, используемая при конкатенации.

например.

console.error("There was an error when the image was loaded after download: ", error); 

FWIW можно также уменьшить некоторые утомительной итерации/коллекции здесь с помощью map для отображения каждого источника на обещание:

function loadImagePromises() { 
    return sources.map(function(source) { 
    return imgLoad(source).then(function(response) { 
    // ... 
    }); 
} 

EDIT Re: ожидание объектов изображения, чтобы фактически загружены

return imgLoad(source).then(function(response) { 
    var imageURL = window.URL.createObjectURL(response); 
    var myImage = new Image(); 

    return new Promise(function(resolve, reject) { 
    myImage.onload = function() { 
     // image has loaded 
     resolve(myImage); 
    } 

    // TODO error handling 

    myImage.src = imageURL; 
    }); 
}, console.error); 
});