如何使Promise返回布尔值以实现图片URL遍历循环？

首先要明确：同步的while循环不能直接配合异步的Promise使用，因为while会瞬间执行完所有迭代，根本等不及Promise的网络请求结果。要实现逐个递增检查图片是否存在的需求，得用async/await把异步操作转为“同步风格”的异步循环。

第一步：修改图片存在性检查函数，返回布尔值的Promise #

原来的imageExists用reject表示图片不存在，调用时还要处理catch，不如统一让它返回一个resolve为布尔值的Promise——成功则resolve(true)，失败则resolve(false)，简化后续逻辑：

function imageExists(url) {
  return new Promise((resolve) => {
    const img = new Image();
    // 图片加载成功，返回true
    img.onload = () => resolve(true);
    // 图片加载失败（比如不存在），返回false
    img.onerror = () => resolve(false);
    // 发起图片请求
    img.src = url;
  });
}

注：原来的定时器逻辑没必要，onload和onerror已经能准确判断图片是否加载成功，定时器反而可能引发逻辑混乱。

第二步：修改loadImg函数，返回带布尔结果的Promise #

让loadImg返回Promise，这样外部可以用await拿到图片是否存在的结果：

async function loadImg(i) {
  const srcPattern = "https://6od.hu/data/hej_Page_0%D.png";
  const src = srcPattern.replace("%D", i);
  // 等待图片存在性检查的结果
  const exists = await imageExists(src);
  console.log(exists ? `图片 ${src} 存在` : `图片 ${src} 不存在`);
  // 返回布尔值，供循环判断使用
  return exists;
}

如果不用async/await，也可以用then链返回结果：

function loadImg(i) {
  const srcPattern = "https://6od.hu/data/hej_Page_0%D.png";
  const src = srcPattern.replace("%D", i);
  return imageExists(src)
    .then(exists => {
      console.log(exists ? `图片 ${src} 存在` : `图片 ${src} 不存在`);
      return exists;
    });
}

第三步：实现异步循环 #

因为loadImg是异步的，必须把循环放在async函数里，用await等待每次检查的结果，再决定是否继续循环：

async function findAllExistingImages() {
  let i = 1;
  while (true) {
    // 等待当前序号的图片检查结果
    const exists = await loadImg(i);
    if (exists) {
      console.log(`序号 ${i}: 图片已找到`);
      i++;
    } else {
      console.log(`序号 ${i}: 图片不存在，停止遍历`);
      // 图片不存在，跳出循环
      break;
    }
  }
}

// 启动遍历
findAllExistingImages();

为什么原来的写法行不通？ #

1. 同步循环无法等待异步结果：while是同步语句，执行时会立刻判断loadImg(i)的返回值，但原来的loadImg没有返回任何值（默认返回undefined），所以循环直接终止，根本等不及图片请求的结果。
2. Promise的异步特性：Promise的then/catch是异步执行的，在同步循环里，这些回调会在循环结束后才执行，无法影响循环的判断逻辑。

关键概念说明（针对Promise学习） #

• Promise的状态：Promise有三种状态：pending（等待中）、fulfilled（成功）、rejected（失败）。我们修改后的imageExists只会进入fulfilled状态，返回布尔值，避免了处理rejected的额外逻辑。
• async/await：这是ES8的语法，是Promise的语法糖，让异步代码看起来像同步代码。async函数返回的是一个Promise，await会暂停函数执行，直到后面的Promise完成，拿到结果后再继续执行。
• 异步循环的本质：异步循环不能用普通的同步循环，必须等待每次异步操作完成后，再执行下一次循环迭代，await正好实现了这个“等待”的逻辑。

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