Vue 3 中可通过请求拦截器优先读取 config.timeout 实现动态超时控制：接口调用时显式传 timeout 覆盖默认值，拦截器中判断并赋值，避免硬编码；推荐按 fast/normal/upload/retryable 场景语义化封装，并依据 P95 响应时长合理分级设置。
Vue 3 中请求拦截器本身不支持“动态覆盖全局 timeout”的语法糖，但可以通过在请求配置中显式传入 timeout 字段，并在请求拦截器里优先读取该字段来实现按接口差异化控制超时时间。
在 request 配置中单独指定 timeout
每个接口调用时，可直接在 axios 请求参数中传入 timeout，它会覆盖实例的默认值：
// 调用时指定
api.getUser({ id: 123 }) // 默认 5s
api.uploadFile(formData, { timeout: 60000 }) // 大文件上传设为 60s
api.search({ q: 'vue' }, { timeout: 3000 }) // 搜索接口更敏感，设为 3s
前提是封装的请求函数（如 useRequest、api.xxx）最终把 options.timeout 透传给 axios(config)。
请求拦截器中读取并应用自定义 timeout
在拦截器里检查 config 是否带 timeout，有则覆盖，无则用实例默认值：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
const service = axios.create({
baseURL: '/api',
timeout: 5000 // 兜底值
})
service.interceptors.request.use(config => {
// ✅ 优先使用传入的 timeout，否则 fallback 到实例默认值
if (config.timeout !== undefined) {
config.timeout = Number(config.timeout)
}
return config
})
这样既保持了统一入口，又保留了单个请求的灵活性。注意：不要在拦截器里写死 config.timeout = xxx，那会强制覆盖所有请求。
结合业务场景做语义化封装
避免每次手动传 timeout，推荐在 API 层做语义化分组：
-
fast：用于列表、下拉、校验类接口 →
timeout: 2000 -
normal：常规 CRUD →
timeout: 5000 -
upload：文件上传、导出 →
timeout: 120000 -
retryable：允许重试的查询 → 可额外加
retry: 2并配合适当 timeout
示例：
// api/user.ts
export const getUser = (id: number) => request.get(`/users/${id}`, { timeout: 5000 })
export const uploadAvatar = (file: File) =>
request.post('/users/avatar', formData, { timeout: 120000 })
注意 Axios 的 timeout 行为边界
timeout 是从 请求发起瞬间 开始计时，到收到完整响应为止；它不区分 DNS 查询、TCP 握手、TLS 协商或服务端处理耗时。若需更精细控制（如仅限制服务端响应时间），需配合 AbortController + signal 实现，但 Vue 3 + axios 组合中需自行注入 signal，且不能和 timeout 混用（二者冲突）。
不复杂但容易忽略：timeout 设太短易误伤慢网用户，设太长又拖垮用户体验。建议按接口类型分级设置，并在监控中观察 P95 响应时长作为依据。
