自定义Promise函数waitToLoadImgs无返回结果求助排查

我有scripts.js和utils.js两个JS文件，在scripts.js中导入utils.js里的自定义Promise函数waitToLoadImgs，但调用后控制台没有任何输出。

原代码 #

utils.js #

const waitToLoadImgs = async (imgEls) => {
  const imgElsPromise = await imgEls.map((imgEl) => {
    return new Promise((resolve) => {
      imgEl.addEventListener("load", () => {
        return resolve("ok");
      });
    });
  });

  const allImgElsLoaded = await Promise.all(imgElsPromise);
  return allImgElsLoaded;
};

export { waitToLoadImgs };

scripts.js #

import {waitToLoadImgs} from "./utils.js";

const imgEls = [...document.querySelectorAll("img")];

const result = await waitToLoadImgs(imgEls);
console.log(result); // 控制台无输出

index.html页面结构 #

<body>
    <img src="./assets/recycle-bin-remove-icon.svg" />
    <img src="./assets/recycle-bin-remove-icon.svg" />
    <img src="./assets/recycle-bin-remove-icon.svg" />
    <img src="./assets/recycle-bin-remove-icon.svg" />
    <img src="./assets/recycle-bin-remove-icon.svg" />
    <script src="scripts.js" type="module"></script>
</body>

更新发现 #

如果移除const allImgElsLoaded = await Promise.all(imgElsPromise);，直接返回imgElsPromise数组，控制台会输出Promise数组，但所有Promise的PromiseResult均为undefined。

修改后的utils.js #

const waitToLoadImgs = async (imgEls) => {
  const imgElsPromise = await imgEls.map((imgEl) => {
    return new Promise((resolve) => {
      imgEl.addEventListener("load", () => {
        resolve("ok");
      });
    });
  });

  // 移除了Promise.all
  return imgElsPromise;
};

export { waitToLoadImgs };

修改后的scripts.js #

import {waitToLoadImgs} from "./utils.js";

const imgEls = [...document.querySelectorAll("img")];

const result = await waitToLoadImgs(imgEls);
console.log(result); // 控制台输出Promise数组，但PromiseResult全为undefined

解决方案 #

问题出在两个核心点：

1. 错误对map结果使用await：map返回普通数组而非Promise，await不会产生任何作用，属于冗余代码。
2. 未处理图片已加载完成的场景：如果图片在脚本执行前就已加载（比如浏览器缓存），load事件不会触发，导致Promise永远无法resolve，原代码中Promise.all会一直等待，控制台无输出；修改后返回的Promise也会一直处于pending状态，所以PromiseResult为undefined。

修复后的utils.js #

const waitToLoadImgs = (imgEls) => {
  const imgPromises = imgEls.map(imgEl => {
    // 检查图片是否已加载完成
    if (imgEl.complete && imgEl.naturalHeight !== 0) {
      return Promise.resolve("ok");
    }
    // 图片未加载完成，监听load事件
    return new Promise(resolve => {
      imgEl.addEventListener("load", () => resolve("ok"));
      // 新增错误监听，避免Promise永远pending
      imgEl.addEventListener("error", () => resolve("error"));
    });
  });
  return Promise.all(imgPromises);
};

export { waitToLoadImgs };

修复说明 #

• 移除不必要的async：Promise.all本身返回Promise，外层无需额外包装async函数
• 增加已加载状态判断：通过imgEl.complete和imgEl.naturalHeight确认图片是否已加载，这种情况直接resolve
• 新增error事件监听：避免图片加载失败时Promise一直处于pending状态，防止代码卡住

修改后调用waitToLoadImgs，控制台会输出包含"ok"（加载成功）或"error"（加载失败）的数组。

内容的提问来源于stack exchange，提问作者JustANewCoder