Question

我在使用链式承诺的脚本加载图像时遇到问题 - 它们最终未定义。我也有一个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程序的promises编写图像加载器脚本。无需将图像加载到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时，您可以使用,链接部分消息，这些部分通常会显示比连接时使用的字符串更丰富的消息。

e.g。

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) {
    // ...
    });
}

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

如何使用链式Promises加载图像

1 个答案: