javascript - 如何使用链式 Promise 加载图像

Question

我在使用链式 promise 脚本加载图像时遇到问题 - 它们最终会出现未定义的情况。我还有一个 404 错误，我不太明白，因为我已经确认所有源都是有效的，但承认我仍然是在异步上下文中进行调试的菜鸟。 这是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 程序的 Promise 编写图像加载器脚本。无需将图像加载到 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;
}

回复:错误:您可能不应该在错误处理程序中隐藏 Error ，而只需使用小写的 error 。此外，当使用 console.log/console.error 时，您可以使用 , 来链接消息的各个部分，这通常会比连接时使用的字符串提供更丰富的消息。

例如

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

FWIW，您还可以通过使用 map 将每个源映射到 promise 来减少一些繁琐的迭代/收集:

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

编辑回复:WAITING图像对象实际加载

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