Skip to content

Axios 安装模式

适用场景:项目使用 Axios,可一键接入(推荐)。

基本接入

javascript
import axios from 'axios';
import {
  setupRequestGuard,        // setup 安装方法
  ConsoleRequestGuardLogger // 内置的日志类(也可继承 RequestGuardLogger 实现)
} from '@hydd/request-guard';

// setupRequestGuard(axios, options) → 返回 RequestGuardController
// 安装后 axios 的所有请求自动进入治理管道
const requestManager = setupRequestGuard(axios, {
  // 消息提示出口
  notify: (payload) => Toast.show(payload.message),
  // 日志观测
  logger: new ConsoleRequestGuardLogger({ devOnly: true }),
  // 全局规则
  rules: [{ method: 'post', duplicate: true }]
});

requestManagerRequestGuardController,可以调用:

  • configure(options) — 更新全局配置
  • setRules(rules) — 覆盖全局规则
  • addRule(rule) — 追加一条规则
  • clearRules() — 清空所有规则
  • clearState() — 清空所有能力状态
  • getStateSnapshot() — 获取当前状态快照
  • createLoadingKey() — 创建可复用的 loadingKey
  • isLoading(key) — 查询某个 key 是否仍在执行中
  • subscribeLoading() — 订阅某个 key 的 loading 布尔变化
  • uninstall() — 卸载守护,恢复 axios 原始行为
  • circuitBreaker — 熔断器手动控制 API

完整方法说明见 RequestGuardController

与外部按钮 loading 协作

如果你希望按钮、局部骨架屏、弹窗提交态等 UI 直接复用 guard 的执行态,可以使用 loadingKey

javascript
import axios from 'axios';
import {
  createLoadingKey,
  isLoading,
  setupRequestGuard,
  subscribeLoading
} from '@hydd/request-guard';

setupRequestGuard(axios, {
  rules: [{ method: 'post', duplicate: true }]
});

const submitLoadingKey = createLoadingKey('submit-order');
const unsubscribe = subscribeLoading(submitLoadingKey, (loading) => {
  console.log('submit button loading:', loading);
});

await axios.post('/api/order/submit', { orderId: '12345' }, {
  requestGuard: {
    duplicate: true,
    loadingKey: submitLoadingKey
  }
});

console.log(isLoading(submitLoadingKey)); // false
unsubscribe();

基于 MIT 许可发布