Pinia 的 action 任务超时处理技巧-Vue.js-PHP中文网

pinia 的 action 本身不内置超时控制，需通过 abortcontroller 主动中断请求、promise.race 封装超时包装器，或 $onaction 统一注入策略来实现；关键在于使异步操作具备可中断和限时能力。

pinia 的 action 任务超时处理技巧

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。

头条号

头条号是一款AI文本写作工具，字节跳动推出的内容创作平台。

下载

写一个 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;
      }
    };
  }
});