如何在没有回调地狱的情况下加载图像？

Question

我正在尝试加载几个 SVG vie Fabric.js 并将它们推送到一个数组中，以便将来访问它们。 我有这个小功能，可以将图片“推送”到数组中。一切正常，但是，因为异步加载，我并没有真正控制特定图片在数组中的位置。 我试图弄清楚，如何使用回调来等待下一张图片加载，但这以一个很长而且不是很灵活的程序结束。 必须有一个更简单的解决方案。你能给我一个提示吗？

这是目前为止的功能：

var axles=[];

makeMySvg('holes.svg', 100, 100, changescale);



function makeMySvg(urlName, posx, posy, callback)
{
    fabric.loadSVGFromURL(urlName,

    function(objects)
    {

            var obj = new fabric.util.groupSVGElements(objects, {
              top: posx,
              left:posy,
              opacity: 1,
              scaleX: 1,
              scaleY: 1,
              objectCaching: true
            });

            canvas.add(obj);
            axles.push(obj);
            callback();

    });

}

function changescale()
{
  console.log(axles.length);
  canvas.renderAll();

}

Answer 1

你可以使用promise和Promise.all来等待你所有的图片加载完毕：

var axles=[];

var images = ['hole1.svg', 'hole2.svg' ];
var promises = images.map(loadSVG);

Promise.all(promises).then(function(loadedImages) {
  var posx = 100, var posy = 100;
  loadedImages.forEach(function(img) {
    var obj = new fabric.util.groupSVGElements(img, {
      top: posx,
      left:posy,
      opacity: 1,
      scaleX: 1,
      scaleY: 1,
      objectCaching: true
    });  
    canvas.add(obj);
    axles.push(obj);
  });
  changescale();
});

makeMySvg('holes.svg', 100, 100, changescale);

loadSVG(img) {
  return new Promise(function(resolve) {
    fabric.loadSVGFromURL(urlName, function(objects) {
      resolve(objects);
    });
  });
}

function changescale()
{
  console.log(axles.length);
  canvas.renderAll();

}