Flutter：能否通过Interceptor统计API调用次数并触发弹窗？

完全可以通过Interceptor实现这个需求，核心思路是在请求拦截阶段记录调用信息，达到阈值后触发弹窗。以下是具体实现步骤：

1. 设计调用统计存储结构 #

需要一个全局存储（比如Map）来记录每个请求的调用次数，键要包含端点路径和请求参数的序列化字符串，确保同一端点+相同参数的请求被归为一组。示例：

// 全局统计对象，键为`路径+参数哈希`，值为调用次数
const apiCallStats = new Map();

// 生成唯一键的方法，处理参数顺序问题
function generateRequestKey(config) {
  const { url, params, data } = config;
  // 统一处理GET/POST参数，排序键后序列化避免顺序影响
  const rawParams = params || data || {};
  const sortedParams = Object.keys(rawParams).sort().reduce((obj, key) => {
    obj[key] = rawParams[key];
    return obj;
  }, {});
  const paramStr = JSON.stringify(sortedParams);
  return `${url}_${paramStr}`;
}

2. 在Interceptor中统计并触发弹窗 #

在请求拦截器里，每次请求前更新统计次数，判断是否超过阈值：

// 以Axios为例的请求拦截器
axios.interceptors.request.use(config => {
  const requestKey = generateRequestKey(config);
  // 更新调用次数
  const currentCount = apiCallStats.get(requestKey) || 0;
  apiCallStats.set(requestKey, currentCount + 1);
  
  // 触发弹窗逻辑
  if (currentCount + 1 > 3) {
    // 调用你的全局弹窗组件，示例为自定义方法
    showGlobalAlert(`请求【${config.url}】已超过3次，请检查操作`);
    // 可选：如果需要限制后续请求，可取消当前请求
    // return Promise.reject(new Error('请求次数超限'));
  }
  
  return config;
}, error => {
  return Promise.reject(error);
});

3. 可选：重置统计逻辑 #

如果需要在特定场景（如用户切换页面、完成操作）重置统计，可添加重置方法：

function resetApiCallStats() {
  apiCallStats.clear();
}

关键注意点 #

• 前端Interceptor的统计数据仅存在于当前页面会话，刷新后会清空；若需持久化，可替换为localStorage存储。
• 弹窗组件需确保全局可调用，或通过状态管理工具（如Vuex、Redux）触发显示。
• 序列化参数时必须处理键的顺序，避免因参数顺序不同导致同一请求被重复统计。

内容的提问来源于stack exchange，提问作者R Rifa Fauzi Komara