Ionic中如何用JavaScript/TypeScript检查图片URL有效性？

你的代码之所以始终返回错误结果，核心原因是图片加载是异步操作，但你用了同步的逻辑去判断结果。当你设置image.src后，浏览器才开始发起请求加载图片，这时候立刻去检查image.onerror，这个事件还根本没触发（不管图片是否损坏），所以函数永远会返回true，完全没等到图片加载完成就给出了判断。

修正方案：用Promise封装异步校验逻辑 #

我们需要把图片校验改成异步函数，通过Promise来获取加载结果，再配合async/await来处理整个列表的校验：

首先，重写你的checkImage函数，让它返回一个Promise：

function checkImage(url) {
  return new Promise((resolve) => {
    const image = new Image();
    // 图片加载成功，标记为有效
    image.onload = () => resolve(true);
    // 图片加载失败（损坏、地址无效等），标记为无效
    image.onerror = () => resolve(false);
    // 触发图片加载
    image.src = url;
  });
}

然后，处理你的图片列表（注意不能直接用forEach，因为它不支持异步等待）：

async function filterValidImages() {
  // 收集所有图片的校验任务
  const validationTasks = this.list.map(async (item) => {
    const isImageValid = await checkImage(item.url);
    return isImageValid ? item : null;
  });

  // 等待所有校验任务完成
  const allResults = await Promise.all(validationTasks);

  // 过滤掉无效的图片项，得到最终列表
  this.validImages = allResults.filter(item => item !== null);
}

额外说明 #

• 为什么用Promise？因为图片的加载结果只能在onload或onerror的异步回调里获取，Promise能帮我们把异步逻辑转换成更易读、更易维护的形式。
• 为什么不用forEach？forEach是同步遍历，它不会等待每个异步校验完成，会直接走完循环，导致你拿到的validImages是空的或者不完整的。用map收集所有Promise后，Promise.all会等待所有异步操作结束，再统一处理结果。
• 如果需要兼容不支持async/await的旧环境，也可以用回调函数的方式，但Promise+async/await的写法是目前最推荐的异步处理方式。

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