Pinia 的 action 本身不内置超时控制，需通过 AbortController 主动中断请求、Promise.race 封装超时包装器，或 $onAction 统一注入策略来实现；关键在于使异步操作具备可中断和限时能力。
Pinia 的 action 本身不内置超时控制，但你可以通过组合 AbortController、Promise.race 或封装请求层，安全、可控地实现任务超时处理。关键不是“给 action 加 timeout”，而是让其调用的异步操作具备可中断和限时能力。
用 AbortController 主动中断请求
这是最推荐的方式，尤其适用于 fetch、Axios（v1.4+）、或支持 signal 的 API 客户端。
- 在 action 内创建
AbortController实例，将signal传入请求方法 - 设置定时器，在指定毫秒后调用
controller.abort() - 捕获
AbortError并统一处理（如清空 loading、提示“请求超时”）
示例：
async fetchProduct(id) {
this.loading = true;
this.error = null;
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 8000); // 8秒超时
try {
const res = await fetch(`/api/products/${id}`, {
signal: controller.signal
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
this.product = await res.json();
} catch (err) {
if (err.name === 'AbortError') {
this.error = '请求超时，请稍后重试';
} else {
this.error = err.message || '加载失败';
}
} finally {
clearTimeout(timeoutId);
this.loading = false;
}
}
用 Promise.race 封装通用超时包装器
适合需要复用超时逻辑的场景，可抽成工具函数，兼容任意 Promise。
- 写一个
withTimeout(promise, ms)工具函数，返回Promise.race([promise, timeoutPromise]) - 在 action 中 await 该包装后的 Promise
- 注意：它不能真正中止原始请求，仅提前拒绝；需配合 AbortController 才能物理中断
示例工具函数：
function withTimeout(promise, ms) {
const timeout = new Promise((_, reject) =>
setTimeout(() => reject(new Error('Request timed out')), ms)
);
return Promise.race([promise, timeout]);
}
// 在 action 中使用
async loadReport() {
this.loading = true;
try {
const data = await withTimeout(api.getReport(), 10000);
this.report = data;
} catch (err) {
this.error = err.message;
} finally {
this.loading = false;
}
}
结合 $onAction 统一注入超时策略（进阶）
若多个 store 的某些 action 都需相同超时规则（如所有以 fetch* 开头的方法限 5 秒），可用 $onAction 拦截并动态包裹。
- 在 store 创建后立即调用
store.$onAction - 检查
context.name是否匹配目标 action 名，再用withTimeout或AbortController包装执行 - 注意：需确保原 action 返回的是 Promise，且拦截逻辑不破坏原有参数与返回值
示例（简化版）：
store.$onAction(({ name, after, onError, store }) => {
if (name.startsWith('fetch') && !store._isTimingOut) {
store._isTimingOut = true;
const originalAction = store[name];
store[name] = async function (...args) {
try {
return await withTimeout(originalAction.apply(this, args), 5000);
} catch (err) {
onError(err);
throw err;
}
};
}
});
避免常见陷阱
超时处理容易忽略的细节：
-
不清理定时器：未在成功/错误分支中
clearTimeout，导致内存泄漏或误触发 -
忽略 AbortError 类型判断：直接把
controller.abort()当作普通错误抛出，UI 显示“网络错误”而非“超时” - 在非请求类 action 中滥用超时：比如纯计算或本地数据处理，加超时无意义，反而增加复杂度
-
未重置 loading/error 状态：超时后忘记设
this.loading = false，导致 UI 卡在加载态
