如何编写更简洁低冗余的fetch请求与API结果渲染JS代码？

你原有代码主要存在4个可优化点：

• DOM 操作重复度极高，反复调用createTextNode、createElement、appendChild写相同逻辑
• 硬编码读取results数组前2项，无法自动渲染接口返回的全部影视条目
• 手动拼接请求URL容易出错（原代码里重复写了两次service=netflix）
• 缺少错误捕获，接口请求失败时会直接抛出未处理的异常，且多次点击按钮会导致内容重复堆叠

具体优化实现 #

1. 抽离通用工具函数 #

把重复的「插入文本+换行」逻辑封装成复用函数，不用反复写相同DOM操作代码：

// 向容器追加带换行的文本内容
function appendTextLine(container, text) {
  container.appendChild(document.createTextNode(text));
  container.appendChild(document.createElement("br"));
}

2. 抽离公共请求配置 #

把固定的请求头、接口基础地址抽成全局常量，不用在循环里重复定义：

const API_CONFIG = {
  method: "GET",
  headers: {
    "X-RapidAPI-Key": "替换为你自己的密钥",
    "X-RapidAPI-Host": "streaming-availability.p.rapidapi.com",
  },
};
const API_BASE = "https://streaming-availability.p.rapidapi.com/search/basic";

3. 改写主逻辑 #

用async/await替代链式then让逻辑更清晰，自动遍历所有返回结果，加错误处理，适配后续新增的流媒体复选框：

document.getElementById('fetch').addEventListener('click', async function (e) {
  e.preventDefault();
  const outputContainer = document.getElementById('output');
  // 每次请求前清空旧内容，避免重复堆叠
  outputContainer.innerHTML = '';

  // 自动识别所有选中的流媒体复选框，后续加新平台不用改选择器
  const checkedServices = document.querySelectorAll('input.filled-in:checked');

  for (const checkbox of checkedServices) {
    try {
      // 用URLSearchParams自动拼查询参数，避免手动拼URL写错
      const query = new URLSearchParams({
        country: "us",
        service: checkbox.id.toLowerCase(),
        type: "movie",
        genre: "18",
        page: "1",
        output_language: "en",
        language: "en"
      });

      const res = await fetch(`${API_BASE}?${query.toString()}`, API_CONFIG);
      const data = await res.json();

      // 输出当前平台标识
      appendTextLine(outputContainer, `当前选中平台：${checkbox.id}`);
      appendTextLine(outputContainer, '====================');

      // 遍历所有返回的影视条目，不用硬编码数组下标
      for (const movie of data.results) {
        appendTextLine(outputContainer, `标题：${movie.title}`);
        // 接口返回的imdbRating是乘10的整数，比如64对应实际6.4分，这里做转换
        appendTextLine(outputContainer, `IMDB评分：${(movie.imdbRating / 10).toFixed(1)}`);
        appendTextLine(outputContainer, `上映年份：${movie.year}`);
        appendTextLine(outputContainer, `剧情简介：${movie.overview}`);
        appendTextLine(outputContainer, '--------------------');
      }
    } catch (err) {
      appendTextLine(outputContainer, `获取${checkbox.id}内容失败：${err.message}`);
    }
  }
});

额外注意点 #

• 你原有HTML里复选框的id写的是Nexflix（多拼了一个x），建议修正为Netflix，和接口要求的service参数保持一致，后续新增Disney+、HBO等其他平台的复选框时，只要把复选框id设为接口要求的service值，不需要修改JS逻辑就能自动适配
• 优化后自动遍历接口返回的全部results条目，不管接口返回8条还是更多内容都能正常渲染，不需要手动改代码
• 加了错误捕获，单个平台请求失败不会中断整个逻辑，也不会在控制台抛出未捕获的异常

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