如何在 Fetch 请求期间显示加载动画（Preloader）

本文详解如何通过 css 类控制实现 fetch 请求过程中的加载状态展示，重点解决因选择器权重或类名匹配错误导致的加载动画不显示问题，并提供完整可运行的代码示例与最佳实践。

在使用 fetch 发起异步请求时，常需向用户反馈“正在加载”状态——典型做法是显示一个旋转加载动画（preloader）。但许多开发者会遇到：明明调用了 showLoad()，页面却始终看不到加载元素。问题往往不出在 javaScript 逻辑本身，而在于 css 类名作用机制与选择器优先级。

回顾原始代码，关键问题出在以下 CSS 规则：

#load.display {     display: block; }

该规则要求元素同时具备 ID load 和类 display 才生效。但 html 中

并未预设任何类，而 js 中仅通过 loader.classlist.add(‘display’) 添加了类名。表面看逻辑成立，实则存在隐性风险：若 .display 类被其他更具体的选择器（如 #load.display）覆盖，或浏览器解析时因 ID 选择器优先级高但匹配失败导致样式未生效，则 display: block 将不会应用。

✅ 正确解法是解除对 ID 的强耦合，改用纯类选择器：

.display {     display: block !important; /* 推荐加 !important 防止被意外覆盖 */ }

同时确保 HTML 中的 loader 元素结构清晰、可访问：

完整的、已修复的 javascript 逻辑如下（含错误处理与用户体验优化）：

const searchButton = document.getElementById('button'); const input = document.getElementById('input'); // ⚠️ 注意：原代码中未定义 input，需补充 const divId = document.getElementById('mainddiv'); const loader = document.getElementById('load');  function showLoad() {     loader.classList.add('display'); }  function hideLoad() {     loader.classList.remove('display'); }  async function getWeather() {     if (!input.value.trim()) return;      showLoad();      try {         const response = await fetch(`http://api.weatherapi.com/v1/current.json?key=XXXXXXX&q=${encodeURIComponent(input.value)}&aqi=no`);          if (!response.ok) {             throw new Error(`HTTP error! status: ${response.status}`);         }          const res = await response.json();         const celsius = `Temp: ${res.current.temp_c} °C`;         divId.innerHTML = celsius;      } catch (err) {         divId.innerHTML = `Error: ${err.message}`;     } finally {         hideLoad(); // 无论成功或失败都隐藏加载器     } }  searchButton.addEventListener('click', getWeather);

? 关键注意事项：

• ✅ 始终在 finally 块中调用 hideLoad()，避免因网络异常、API 错误等导致加载动画永久挂起；
• ✅ 使用 encodeURIComponent() 对用户输入进行编码，防止特殊字符破坏 URL；
• ✅ 确保 input 元素已正确定义并获取（原代码缺失 input 引用，需补全）；
• ✅ 推荐为 loader 添加 role=”status” 和 aria-live=”polite” 提升无障碍体验；
• ✅ 若项目使用现代构建工具（如 vite、webpack），可进一步封装为可复用的 useLoading() Hook 或自定义指令。

通过修正 CSS 类选择器 + 完善 JS 控制流，即可稳定、可靠地在 fetch 请求周期内显示/隐藏 preloader，显著提升 Web 应用的响应感知与用户体验。