如何从NASA API对象数组获取图片属性并点击按钮随机显示？

原代码存在的问题 #

• 每次点击按钮都重复请求API，造成不必要的资源浪费
• 使用forEach遍历所有照片，最终只会将最后一张图片的地址赋值给<img>标签，完全没有实现随机展示的逻辑
• 代码中存在多余的f语法错误，会导致代码无法正常运行

修正后的实现方案 #

我们可以将API返回的照片数组缓存起来，避免重复请求；同时通过记录已展示的图片索引，确保每次点击都展示不同的图片（当所有图片都展示过后，会重新开始循环）。

// 全局变量缓存照片数组和已展示的索引集合
let marsPhotos = [];
const shownIndexes = new Set();

document.querySelector('button').addEventListener('click', handlePhotoClick);

function handlePhotoClick() {
  // 如果还没缓存照片数据，先请求API
  if (marsPhotos.length === 0) {
    const url = 'https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=1wCuyjoxfSrvsEbUpfWJvuBEMB5I0x79kXS0pfrg';
    fetch(url)
      .then(res => res.json())
      .then(data => {
        marsPhotos = data.photos;
        showRandomPhoto();
      })
      .catch(err => {
        console.log(`请求出错：${err}`);
      });
  } else {
    // 已有缓存数据，直接展示随机照片
    showRandomPhoto();
  }
}

function showRandomPhoto() {
  // 如果所有照片都展示过了，重置已展示索引集合
  if (shownIndexes.size === marsPhotos.length) {
    shownIndexes.clear();
  }

  let randomIndex;
  // 生成未展示过的随机索引
  do {
    randomIndex = Math.floor(Math.random() * marsPhotos.length);
  } while (shownIndexes.has(randomIndex));

  // 更新图片地址并记录索引
  document.querySelector('img').src = marsPhotos[randomIndex].img_src;
  shownIndexes.add(randomIndex);
}

关键逻辑说明 #

1. 缓存数据：第一次点击时请求API，将返回的照片数组存入marsPhotos，后续点击直接使用缓存数据，避免重复请求
2. 避免重复展示：使用Set类型的shownIndexes记录已经展示过的图片索引，每次生成随机索引时确保该索引未被记录
3. 循环复用：当所有照片都展示过后，清空shownIndexes，重新开始随机展示

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