Wretch项目中的请求重放机制解析

背景介绍

Wretch是一个轻量级的JavaScript HTTP客户端库，提供了简洁的API来处理网络请求。在实际开发中，我们经常需要处理身份认证过期后自动刷新令牌并重试请求的场景。

问题分析

在Wretch中，开发者可以通过.catcher()方法捕获特定状态码（如401未授权）并尝试重新认证后重放请求。然而，当使用不同的响应解析方法（如.json()、.text()、.blob()等）时，重放机制会遇到兼容性问题。

技术细节

原始实现的问题

原始的重放实现只能正确处理.json()方法，因为重放逻辑中硬编码了.json()调用：

return request.auth(token).fetch().unauthorized((err) => {
  throw err;
}).json(); // 固定使用json解析

这导致使用其他解析方法时会出现类型不匹配的问题。

解决方案

Wretch的维护者提出了一个基于内容类型自动解析的解决方案，通过创建一个自定义插件来实现：

1. 定义AutoParseAddon接口：扩展Wretch的响应链类型
2. 实现自动解析逻辑：根据响应头中的Content-Type自动选择适当的解析方法
3. 处理多种内容类型：
   • application/json → .json()
   • text/plain → .text()
   • application/octet-stream → .blob()
   • multipart/form-data → .formData()
   • 默认情况 → .text()

实现代码

const autoParseAddon = () => ({
  resolver: {
    async auto(cb = <Type>(_: unknown) => _ as Type) {
      const response = await this._fetchReq;
      const contentType = response.headers.get('content-type');
      switch (contentType) {
        case 'application/json':
          return this.json().then(cb);
        case 'text/plain':
          return this.text().then(cb);
        case 'application/octet-stream':
          return this.blob().then(cb);
        case 'multipart/form-data':
          return this.formData().then(cb);
        default:
          return this.text().then(cb);
      }
    }
  }
});

使用示例

const retryOn401 = wretch('https://example.com')
  .addon(autoParseAddon())
  .catcher(401, async (error, request) => {
    console.log('认证过期，尝试刷新令牌');
    return request.url('https://api.example.com/token', true)
      .get()
      .auto();
  });

// 无论API返回JSON还是文本都能正确处理
retryOn401.get("/resource").auto()
  .then(data => console.log('响应数据:', data));

局限性

1. 无法处理直接使用.res()方法获取原始响应对象的情况
2. 内容类型判断可能不够全面，需要根据实际API调整
3. 自定义回调函数的类型推断可能不够精确

最佳实践建议

1. 对于简单的API，使用自动解析插件即可满足大部分需求
2. 对于复杂的场景，建议针对不同端点分别实现重放逻辑
3. 考虑将认证刷新逻辑提取为独立函数，提高代码复用性
4. 在生产环境中添加适当的错误处理和日志记录

通过这种自动解析机制，开发者可以更灵活地处理各种API响应类型，同时保持认证失败后自动重试的功能。