Question

我正在尝试使用Promise.all加载图像，
但状态仍然令人绝望

const images =
        { menu: { img:null , path:'images/Menu.png', status:'none' }
        , map : { img:null , path:'images/a6.png'  , status:'none' }
        };

function loadImage( ref ) {
  return new Promise(function (resolve) {

    console.log( ref.path );

    ref.img = new Image();

    ref.img.onload  =_=>{ ref.status='OK';  resolve() };
    ref.img.onerror =_=>{ ref.status='bad'; resolve() };

    ref.img.src = ref.path;
  });
}

Promise
  .all([ loadImage(images.menu), loadImage(images.map) ])
  .then()
    {
    console.log('menu:', images.menu.status);
    console.log('map :', images.map.status);
    };

控制台：

images / Menu.png
    images / a6.png
    菜单：无
    地图：无

我想念什么？

（请仅使用JS-es6）

Answer 1

then()需要使用回调函数。您正在运行then()并进行任何回调。

尝试一下：

Promise
  .all([ loadImage(images.menu), loadImage(images.map) ])
  .then(function(){
    console.log('menu:', images.menu.status);
    console.log('map :', images.map.status);
  });

当所有承诺结束时，将调用您作为then()回调传递的函数。请注意我如何使用函数作为参数来调用then(function...)。

Answer 2

此语法

Promise
  .all([ loadImage(images.menu), loadImage(images.map) ])
  .then()
    {
    console.log('menu:', images.menu.status);
    console.log('map :', images.map.status);
    };

不对。我想你的意思是这样：

Promise
  .all([ loadImage(images.menu), loadImage(images.map) ])
  .then(function(){
     console.log('menu:', images.menu.status);
     console.log('map :', images.map.status);
  });

用Promise.all加载图像

2 个答案: