JavaScript新手求助：fetch()实现动态图片画廊及外部数据源加载问题

我是JavaScript新手，作业要求用fetch()方法结合外部数据构建动态图片画廊，需要实现点击按钮生成随机数并加载对应外部数据集的功能。现有代码无法正常运行，找不到错误位置，当前代码是示例版本，之后要替换成自己的外部链接，请求帮助。

我的代码片段：

console.clear();
document.querySelector("button#myLanguageBTN").addEventListener(
  "click",
  function () {
    var randomNumber = Math.floor(Math.random() * 5); 
    
    switch (randomNumber) {
      case 1:
        var myfetchLink = "https://codepen.io/tchau16/pen/PoaaJYG.js";
      
      case 2:
        var myfetchLink = "https://codepen.io/tchau16/pen/dyKKVGP.js";
        
       case 3:
        var myfetchLink = "https://codepen.io/tchau16/pen/jOKKGWZ.js";
        
        case 4:
        var myfetchLink = "https://codepen.io/tchau16/pen/JjZZrGQ.js";
        
        default:
        var myfetchLink = "https://codepen.io/tchau16/pen/dyKKVGP.js";
    }
    
    console.log(myfetchLink);
    
    .then((response) => {
        return response.text();
      })

    .then((myInformation) => {
        const myReturn = JSON.parse(myInformation);

代码核心错误及修正方案 #

1. switch语句缺少break

每个case后未添加break，不管随机数是1/2/3/4，代码都会执行到default分支，导致myfetchLink永远是默认值。必须给每个case添加break，确保匹配后跳出switch。

2. 缺失fetch()调用

代码只有.then()但没有发起请求的fetch(myfetchLink)，then必须链式调用在fetch返回的Promise对象上，这是请求发起的核心步骤。

3. 代码不完整且无错误处理

现有代码未闭合大括号，第二个then仅解析了JSON但无后续渲染逻辑；同时缺少.catch()处理网络错误、JSON解析错误等异常。

4. 变量声明不规范

每个case重复用var声明myfetchLink，虽var会变量提升，但建议在switch外统一声明，避免冗余。

修正后的完整示例代码 #

console.clear();
document.querySelector("button#myLanguageBTN").addEventListener("click", function () {
  // 提前声明变量，避免重复声明
  let myfetchLink;
  // 生成0-4的随机数，对应case分支
  const randomNumber = Math.floor(Math.random() * 5); 

  switch (randomNumber) {
    case 1:
      myfetchLink = "你的外部数据集链接1";
      break;
    case 2:
      myfetchLink = "你的外部数据集链接2";
      break;
    case 3:
      myfetchLink = "你的外部数据集链接3";
      break;
    case 4:
      myfetchLink = "你的外部数据集链接4";
      break;
    default:
      myfetchLink = "默认数据集链接";
      break;
  }

  console.log("当前加载的链接：", myfetchLink);

  // 发起fetch请求并链式处理响应
  fetch(myfetchLink)
    .then((response) => {
      // 先检查响应是否成功
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      // 直接用response.json()解析JSON数据，无需先转文本再parse
      return response.json();
    })
    .then((imageData) => {
      // 渲染图片画廊逻辑，根据你的数据集结构调整字段
      const galleryContainer = document.getElementById("imageGallery");
      // 清空画廊原有内容
      galleryContainer.innerHTML = "";
      
      // 遍历数据生成图片元素
      imageData.forEach(item => {
        const img = document.createElement("img");
        img.src = item.imageUrl; // 替换为你数据中的图片地址字段
        img.alt = item.description; // 替换为你数据中的图片描述字段
        img.style.width = "200px"; // 可自定义样式
        galleryContainer.appendChild(img);
      });
    })
    .catch((error) => {
      // 捕获并打印错误，方便排查
      console.error("加载数据出错：", error);
    });
});

注意事项 #

• 替换代码中的链接为你自己的外部数据集链接，确保返回合法JSON格式。
• 根据你的数据集结构，调整渲染逻辑中的字段名（如imageUrl、description）。
• 页面需包含一个id为imageGallery的容器元素，用于展示图片。

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