用Promise.all加载图像

Posted 2023-02-15

我正在尝试使用Promise.all加载图像，但是对于“ none”来说，状态仍然令人绝望]

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.pngimages / a6.png菜单：无地图：无

我想念什么？

（（请仅使用JS-es6）

答案

此语法

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

另一答案

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

尝试一下：

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

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