如何从图片存在检查的Promise中获取布尔值并赋值给变量

你试过的let imgExist = imageExists(url).then(ok => ok)之所以没用，核心原因是这个图片检查方法返回的是Promise，属于异步操作——异步操作不会立刻给出结果，.then()本身返回的还是一个Promise对象，不是你要的布尔值。

下面给两种可行的解决方式：

方法1：用async/await写同步风格的代码 #

这是最直观的写法，把逻辑放在async函数里，用await等待Promise完成，就能直接拿到布尔值赋值给变量：

// 保留你原有的imageExists函数
function imageExists(url) {
  return new Promise(resolve => {
    var img = new Image()
    img.addEventListener('load', () => resolve(true))
    img.addEventListener('error', () => resolve(false))
    img.src = url
  })
}

// 新增async函数处理逻辑
async function handleImageCheck() {
  const url = 'http://www.google.com/images/srpr/nav_logo14.png';
  // await会等待Promise完成，拿到最终的布尔值
  let imgExist = await imageExists(url);
  // 这里就可以正常使用imgExist做后续操作了
  console.log(`图片是否存在：${imgExist}`);
  // 示例：根据状态执行不同逻辑
  if (imgExist) {
    console.log('可以加载这张图');
  } else {
    console.log('图片不存在，换一张');
  }
}

// 调用这个async函数
handleImageCheck();

方法2：在.then()回调里处理变量 #

既然异步结果只能在回调里拿到，那直接把后续逻辑放在.then()里面，或者把值传给其他函数：

function imageExists(url) {
  return new Promise(resolve => {
    var img = new Image()
    img.addEventListener('load', () => resolve(true))
    img.addEventListener('error', () => resolve(false))
    img.src = url
  })
}

let imgExist;
const url = 'http://www.google.com/images/srpr/nav_logo14.png';

imageExists(url).then(ok => {
  imgExist = ok;
  // 所有需要用到imgExist的代码都要写在这里，或者调用其他函数传入值
  console.log(`图片是否存在：${imgExist}`);
  useImageExistStatus(imgExist);
});

// 专门处理图片状态的函数
function useImageExistStatus(exists) {
  if (exists) {
    // 图片存在的逻辑
  } else {
    // 图片不存在的逻辑
  }
}

简单总结：异步操作的结果没法像同步代码那样直接赋值，必须等异步完成后在回调（.then()）或者用await等待完成后，才能拿到最终值。

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