TanStack Query + Ky 403重发请求时控制台出现Unknown timeout error的处理咨询

老哥我太懂你这种烦躁了！控制台突然蹦出来一堆无关的403报错，还追根到timeout.ts，本来逻辑是对的（403就刷token重发），但看着冗余日志就闹心对吧？我来给你捋捋怎么把这个问题搞定👇

首先，咱们得从Ky的请求拦截入手，因为请求是Ky发出去的，错误也是从它这儿先冒出来的。你可以给Ky实例加个beforeError钩子，提前把403错误截住，替换成你要的自定义日志，甚至直接在这儿处理token刷新和重试，不让错误冒泡到控制台：

// 创建你的Ky实例并配置钩子
const api = ky.create({
  hooks: {
    beforeError: [
      async (error) => {
        // 精准捕获403状态码的错误
        if (error.response?.status === 403) {
          // 替换成你想要的自定义日志
          console.log('Getting new token');
          
          // 执行你的刷新token逻辑（比如调用刷新接口获取新token）
          const newToken = await fetchNewAccessToken();
          
          // 用新token重新发起原请求，返回新响应，跳过错误抛出流程
          const retryResp = await ky(error.request, {
            headers: {
              Authorization: `Bearer ${newToken}`,
            },
          });
          
          // 返回重试后的响应，Ky会将其识别为正常请求结果
          return retryResp;
        }
        // 非403错误正常抛出，不影响其他错误的调试
        return error;
      },
    ],
  },
});

如果你的token刷新和请求重发逻辑是依托TanStack Query的重试机制实现的，那就在QueryClient的全局配置里，把403错误的默认控制台输出给屏蔽，换成自定义日志：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // 拦截所有Query的错误回调
      onError: (error) => {
        // 判断是否为咱们要处理的403场景
        if (error.response?.status === 403) {
          // 只打印自定义日志，不抛出原错误到控制台
          console.log('Getting new token');
          return;
        }
        // 其他类型错误正常输出，不影响日常调试
        console.error(error);
      },
      // 配置仅403时触发重试，避免无意义的重复请求
      retry: (failureCount, error) => {
        // 限制只重试1次，防止无限循环
        return error.response?.status === 403 && failureCount < 1;
      },
    },
  },
});

另外提个小细节：你说错误来自timeout.ts，大概率是Ky内部把403错误和超时逻辑做了绑定，或者是重试时原请求触发了超时判定。上面两种方案不管选哪种，都能把冗余的403错误日志给压下去，优先试试Ky层面的拦截，从请求源头处理最直接，也能减少TanStack Query那边的不必要错误信号。

备注：内容来源于stack exchange，提问作者magrega