多语言请求头需动态注入，推荐通过 localstorage、工具函数 getlang() 或 pinia 监听缓存语言值供拦截器读取，并在 axios 请求拦截器中统一设置 accept-language 等头；语言切换后新请求立即生效，但 pending 请求不会自动更新，需避免复用并考虑防抖或取消机制。
多语言请求头需动态注入，不能写死
后端接口常要求根据当前语言发送特定请求头，比如 Accept-Language 或自定义头如 X-App-Language。Vue 3 中语言状态通常由 i18n 管理（如 i18n.locale.value），但拦截器是独立于组件的，无法直接访问响应式状态。必须通过可读取的“单一数据源”提供语言值。
推荐用全局状态或工具函数获取语言
避免在拦截器里 import { i18n } from '@/i18n' 后调用 i18n.locale.value——这在某些构建场景下会引发循环依赖或 undefined。更稳妥的做法是：
- 将语言存入
localStorage或sessionStorage，拦截器中用getItem('lang')读取 - 封装一个纯函数
getLang()，内部优先读本地存储， fallback 到浏览器navigator.language - 若使用 Pinia，可在拦截器外监听 store 变化，把最新语言缓存在一个普通变量中供拦截器读取（例如
window.__CURRENT_LANG = 'en'）
请求拦截器中添加语言头的写法
在 request.interceptors.request.use 中统一注入，示例代码：
src/utils/request.ts 为例）
import { getLang } from '@/utils/lang' // 封装好的语言获取函数
request.interceptors.request.use(config => {
const lang = getLang()
config.headers['Accept-Language'] = lang
// 或：config.headers['X-App-Language'] = lang
// 其他逻辑：token、loading 等保持不变
return config
}, error => Promise.reject(error))
注意语言切换时的请求一致性
用户切换语言后，新语言应立即生效于后续所有请求。但已发出、正在 pending 的请求不会自动重发或改头——这是正常行为。需确保：
- 语言变更后，不再复用旧请求实例（如未完成的搜索、分页请求）
- 关键操作（如提交表单、拉取配置）建议加防抖或取消机制，避免语言错位导致后端返回错误文案
- 如果后端支持，也可在响应拦截器中检查
response.headers['content-language']，与当前语言比对，不一致时可 warn 或触发刷新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
