如何使用$fetch实现类似Axios的请求重发（401更新token重试）

AI 小北

2026-7-8

用$fetch实现401错误时更新令牌并重发请求

在Axios里可以通过拦截器轻松实现401时刷新令牌并重发请求，而原生fetch（或Nuxt的$fetch）没有内置拦截器，需要自己封装请求逻辑来实现这个需求。以下是具体实现方案：

实现逻辑

封装自定义fetch函数，统一处理请求和错误捕获
检测到响应返回401状态码时，调用令牌刷新接口获取新令牌
复制原始请求的配置，更新请求头中的令牌信息后重新发送请求

代码示例

// 封装带重试逻辑的自定义fetch
async function customFetch(url, options = {}) {
  const response = await fetch(url, options);

  // 捕获401未授权错误，执行令牌刷新逻辑
  if (response.status === 401) {
    // 调用你的令牌刷新接口，替换为实际业务逻辑
    const newToken = await getNewToken();

    // 处理原始请求头：如果是Headers对象，先转为普通对象
    const originalHeaders = options.headers instanceof Headers
      ? Object.fromEntries(options.headers.entries())
      : options.headers || {};

    // 复制原始请求配置并更新令牌
    const updatedRequestOptions = {
      ...options,
      headers: {
        ...originalHeaders,
        Authorization: `Bearer ${newToken}` // 根据你的令牌格式调整
      }
    };

    // 重发原始请求
    return fetch(url, updatedRequestOptions);
  }

  // 非401错误直接返回响应
  return response;
}

// 示例：获取新令牌的函数
async function getNewToken() {
  const refreshRes = await fetch('/api/refresh-token', {
    method: 'POST',
    credentials: 'include' // 若需要携带刷新令牌的cookie，添加此配置
  });
  const refreshData = await refreshRes.json();
  return refreshData.accessToken;
}