如何避免Vue热重载触发过多API请求？

热重载触发组件逻辑重新执行时，会连带重新跑组件挂载阶段的请求逻辑，针对有调用频次限制的接口，可以用以下几类无侵入、易落地的方案解决：

• 开发环境内存缓存方案
  利用热重载不会清空页面全局内存的特性，把首次请求的结果存在全局变量上，后续重复触发请求时直接读缓存，不会打到真实接口。
  参考实现：

  // 定义全局缓存key，避免和其他变量冲突
  const RATE_LIMIT_API_CACHE = '__dev_api_cache_xxx'
  async function fetchLimitedApi() {
    // 仅开发环境生效缓存逻辑
    if (import.meta.env.DEV && window[RATE_LIMIT_API_CACHE]) {
      return window[RATE_LIMIT_API_CACHE]
    }
    const resp = await fetch('你的限流接口地址')
    const data = await resp.json()
    if (import.meta.env.DEV) {
      window[RATE_LIMIT_API_CACHE] = data
    }
    return data
  }
  

  如果项目用Axios等请求库，可以直接搭配开发环境的请求缓存适配器，不用单独给单个接口写缓存逻辑。

• 开发服务层请求拦截缓存
  用构建工具的开发服务器插件做接口缓存：第一次请求拿到真实接口返回后，把结果存在开发服务的内存里，后续同路径同参数的请求直接返回缓存结果，完全不需要修改业务组件的代码。Vite、Webpack都有对应的成熟插件可以直接配置使用。
  也可以搭配本地Mock服务，首次请求成功后把结果落为本地Mock文件，后续请求直接读本地文件，同样不会触发真实接口调用。

• 热重载场景跳过逻辑判断
  可以在全局打一个热重载标记，组件触发挂载请求前先判断标记：如果是热重载触发的重挂载，直接跳过限流接口的请求逻辑。
  参考实现：

  // 根组件/请求触发逻辑前加判断
  if (import.meta.env.DEV && window.__HMR_RELOADED__) {
    // 热重载触发，跳过限流请求
    return
  }
  window.__HMR_RELOADED__ = true
  // 原有请求逻辑
  

• 浏览器原生缓存配置
  针对GET类型的限流接口，开发环境下给fetch配置加cache: 'force-cache'参数，浏览器会自动缓存同地址的请求结果，后续重复请求会直接读取浏览器缓存，不会发起真实网络请求。注意这个配置仅在开发环境开启，生产环境要替换为符合业务要求的缓存策略，避免数据不更新。

重要提醒：所有仅用于开发调试的逻辑，必须用环境变量判断包裹，严禁把调试逻辑打包到生产环境。

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