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 }]
});requestManager 是 RequestGuardController,可以调用:
configure(options)— 更新全局配置setRules(rules)— 覆盖全局规则addRule(rule)— 追加一条规则clearRules()— 清空所有规则clearState()— 清空所有能力状态getStateSnapshot()— 获取当前状态快照createLoadingKey()— 创建可复用的 loadingKeyisLoading(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();