如何避免开发时误触发API调用耗尽每日调用限额？

核心思路：避免开发时触发真实API调用 #

以下是几种直接可行的落地方法：

• 本地Mock数据替代
  先调用一次真实API，把返回的完整数据存成本地JSON文件（比如mock-api-response.json），开发阶段直接读取这个本地文件，完全跳过真实API请求。示例代码（前端JS）：

  const isDev = process.env.NODE_ENV === 'development';
  let apiData;
  
  if (isDev) {
    // 开发环境读本地Mock数据
    apiData = require('./mock-api-response.json');
  } else {
    // 生产环境调用真实API
    const res = await fetch('https://your-real-api-url.com/data');
    apiData = await res.json();
  }
  

  后端服务同理，直接返回预设的Mock数据结构体即可。

• 启用请求拦截工具
  用拦截工具接管开发环境的API请求，直接返回预设数据，不用修改业务代码。比如前端可以用Mock Service Worker（MSW），后端可以给框架加拦截中间件，配置规则后，所有指向目标API的请求都会被拦截并返回Mock结果。

• 调整自动刷新触发逻辑
  修改服务器的热更新规则，减少不必要的页面刷新：

  • 只监听静态资源（CSS、HTML）或业务代码的修改，跳过配置文件等无关变动；
  • 设置延迟刷新（比如3秒），避免短时间内多次修改触发多次刷新。
    以webpack-dev-server为例，修改配置：

  module.exports = {
    watchOptions: {
      ignored: /node_modules|\.config.js/,
      aggregateTimeout: 3000
    }
  };
  

• 开发环境启用持久化缓存
  对API请求结果做本地缓存，相同请求直接取缓存，不再调用真实API。示例代码（前端）：

  const fetchApiData = async () => {
    const cacheKey = 'dev-api-cache';
    const cachedData = localStorage.getItem(cacheKey);
    
    if (isDev && cachedData) {
      return JSON.parse(cachedData);
    }
  
    const res = await fetch('https://your-real-api-url.com/data');
    const data = await res.json();
    
    if (isDev) {
      localStorage.setItem(cacheKey, JSON.stringify(data));
    }
    return data;
  };
  

• 迁移到本地开发环境
  尽量不在生产服务器直接编码，搭建本地开发环境，完全隔离生产API的调用逻辑，开发完成后再部署到生产服务器做最终验证。

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