在wretch项目中复用错误处理函数的TypeScript实践

wretch是一个轻量级的JavaScript HTTP客户端库，提供了简洁的API来处理网络请求。在实际开发中，我们经常需要处理HTTP错误，特别是认证相关的错误如401(Unauthorized)和403(Forbidden)。本文将介绍如何在wretch项目中优雅地复用这些错误处理函数。

错误处理函数的复用需求

在构建API客户端时，认证错误是常见场景。当token过期时，我们通常希望：

1. 自动刷新token
2. 使用新token重试原始请求
3. 如果再次失败则抛出错误

这种逻辑需要在多个地方复用，而不是在每个请求中重复编写。

初始实现的问题

开发者最初尝试通过类型推断来创建通用的错误处理函数：

type InferClientErrorCallback<Client> = 
  Client extends Wretch<infer T, infer C, infer R>
    ? WretchErrorCallback<T, C, R>
    : never;

但遇到了类型不匹配的问题，TypeScript无法正确推断回调函数的参数类型。

解决方案

正确的做法是明确定义错误处理函数的类型参数，而不是尝试从客户端实例推断：

async function renewCredentials<T, C, R extends undefined>(
  error: WretchError, 
  req: T & Wretch<T, C, R>
) {
  // 刷新token逻辑
  const token = await wretch('/renewtoken').get().text();
  
  // 使用新token重试请求
  return req
    .auth(token)
    .get()
    .unauthorized(err => { throw err; })
    .json();
}

使用方法

定义好通用错误处理函数后，可以轻松地将其应用到客户端实例上：

const client = wretch('/api/v1').resolve((chain) =>
  chain
    .unauthorized(renewCredentials)
    .forbidden(renewCredentials)
);

类型系统解析

这个解决方案的关键在于：

1. T 代表请求返回的数据类型
2. C 代表链式调用的上下文类型
3. R 代表解析器类型，这里限制为undefined表示不使用特定解析器

通过显式声明这些类型参数，TypeScript能够正确推断错误处理函数中的req参数类型，从而提供完整的类型安全和IDE智能提示。

最佳实践建议

1. 对于复杂的错误处理逻辑，建议将其提取为独立函数
2. 明确定义类型参数比类型推断更可靠
3. 可以在错误处理函数中添加日志记录等横切关注点
4. 考虑为不同的错误类型(401/403等)编写特定的处理函数

通过这种方式，我们可以在wretch项目中构建出类型安全且易于维护的API客户端层。