Firefox Developer版点击触发fetch时UI不更新问题咨询

问题表现 #

• 使用HTML、CSS、JS实现的Frontend Mentors平台Advice generator App项目，在Brave等所有Chromium内核浏览器中运行正常
• 在Firefox Developer浏览器中，首次点击按钮可以正常触发绑定的click事件，执行fetch请求拉取接口数据更新UI；后续再次点击按钮时，控制台打印的接口响应和第一次请求完全一致，UI不会更新

复现问题的核心代码 #

"use strict";

// 页面DOM元素
const rollDice = document.getElementById("roll-dice");
const adviceNumber = document.getElementById("advice-number");
const adviceParagraph = document.getElementById("advice");
const url = "https://api.adviceslip.com/advice";

// 骰子按钮点击逻辑
rollDice.addEventListener("click", () => {
  fetch(url)
    .then((response) => response.json())
    .then(
      (data) => (
        (adviceNumber.textContent = data.slip.id),
        (adviceParagraph.textContent = data.slip.advice)
      )
    );
});

问题根因 #

这个问题不是事件绑定失效，也不是Firefox Developer版本的专属bug，是浏览器HTTP缓存策略差异导致的

• 你调用的advice接口是GET类型请求，接口响应没有返回强制禁用缓存的相关头字段，Firefox对完全相同URL的GET请求，会默认直接读取本地缓存的首次响应结果，不会真正向服务器发起新的网络请求，所以每次拿到的都是第一次缓存的内容
• Chromium内核浏览器对该接口的缓存有效期判定规则和Firefox不同，不会直接读取缓存，每次点击都会发起新请求，因此可以拿到新的advice内容，没有复现问题

修复方法 #

两种方案都可以解决：

• 给每次请求的URL追加动态变化的查询参数，保证每次请求的URL唯一，绕过缓存匹配规则：

rollDice.addEventListener("click", () => {
  // 用当前时间戳作为动态参数，保证每次请求URL不重复
  fetch(`${url}?timestamp=${Date.now()}`)
    .then((response) => response.json())
    .then(
      (data) => {
        adviceNumber.textContent = data.slip.id;
        adviceParagraph.textContent = data.slip.advice;
      }
    );
});

• 直接在fetch配置项里指定缓存策略，强制不读取缓存、每次都发起新请求：

rollDice.addEventListener("click", () => {
  fetch(url, { cache: "no-store" })
    .then((response) => response.json())
    .then(
      (data) => {
        adviceNumber.textContent = data.slip.id;
        adviceParagraph.textContent = data.slip.advice;
      }
    );
});

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