Skip to Content
个人见解axios的设计思想

Soybean Admin React Axios 封装与常规封装对比

常规 Axios 封装的局限

  1. 错误处理较为简单

    • 通常只在响应拦截器中统一处理错误
    • 难以区分网络错误和业务逻辑错误
    • 错误处理代码往往散布在业务逻辑中

  2. 请求管理能力有限

    • 缺乏请求追踪机制
    • 请求取消实现繁琐
    • 重试逻辑需手动实现

  3. 配置扩展性不足

    • 拦截器配置一次性完成
    • 难以根据不同请求场景灵活调整
    • 对特定请求的特殊处理需额外编码

Soybean Admin Axios 封装的优势

  1. 多层次错误处理

    • 网络层错误与业务错误分离：通过 isBackendSuccess 钩子明确区分 HTTP 成功但业务失败的情况
    • 错误处理扁平化：createFlatRequest 返回 { data, error, response } 结构，简化错误处理
    • 细粒度错误处理：提供 onBackendFail 和 onError 钩子分别处理业务错误和网络错误
    • 自定义错误类型：使用 BACKEND_ERROR_CODE 标识后端错误，增强错误识别能力

  2. 请求全生命周期管理

    • 请求 ID 跟踪：每个请求自动分配唯一 ID，方便调试和日志追踪
    • 集中式请求取消：通过 AbortController 实现请求统一管理
    • 请求重试增强：集成 axios-retry 提供可配置的重试策略

  3. 高度可定制的钩子系统

    • 请求前处理：onRequest 支持异步操作，可处理鉴权等复杂逻辑
    • 响应转换：transformBackendResponse 提供统一数据格式转换
    • 错误恢复机制：onBackendFail 可返回新的响应，实现如 token 刷新等高级功能

  4. 响应类型的灵活处理

    • 支持多种响应类型（json、blob、text等）的类型安全处理
    • 泛型设计使响应数据类型可预测

  5. 状态管理能力

    • 请求实例可携带状态（request.state），便于管理全局配置
    • 支持在请求间共享状态，如令牌管理

实际业务场景对比

1. 处理登录令牌过期

常规封装：

// 在响应拦截器中处理
axios.interceptors.response.use(
  response => response,
  async error => {
    if (error.response?.status === 401) {
      // 刷新令牌逻辑
      try {
        const newToken = await refreshToken();
        error.config.headers.Authorization = `Bearer ${newToken}`;
        return axios(error.config);
      } catch {
        // 跳转登录
        router.push('/login');
      }
    }
    return Promise.reject(error);
  }
);

Soybean Admin 封装：

const request = createRequest({
  baseURL: '/api'
}, {
  isBackendSuccess: res => res.data.code === 0,
  onBackendFail: async (response, instance) => {
    if (response.data.code === 401) {
      // 刷新令牌
      try {
        const newToken = await refreshToken();
        request.state.token = newToken;
 
        // 重新发送原请求
        return await instance({
          ...response.config,
          headers: {
            ...response.config.headers,
            Authorization: `Bearer ${newToken}`
          }
        });
      } catch {
        // 处理失败逻辑
      }
    }
    return null; // 继续抛出错误
  }
});

2. 错误处理对比

常规封装：

try {
  const response = await axios.get('/api/users');
  // 处理响应
} catch (error) {
  if (axios.isAxiosError(error)) {
    // 处理网络错误
    if (error.response) {
      // 处理服务器返回的错误
    } else {
      // 处理网络连接错误
    }
  } else {
    // 处理其他错误
  }
}

Soybean Admin 封装：

// 方式一：使用扁平响应
const { data, error } = await flatRequest({
  url: '/users',
  method: 'get'
});
 
if (error) {
  // 处理错误
} else {
  // 使用数据
}
 
// 方式二：集中错误处理
const request = createRequest({
  // ...配置
}, {
  onError: async (error) => {
    // 统一错误处理，如显示提示消息
    showErrorMessage(error.message);
  }
});
 
// 业务代码中只需关注正常流程
const data = await request({
  url: '/users',
  method: 'get'
});
// 直接使用数据

通过以上对比可见，Soybean Admin 的 Axios 封装在错误处理、请求管理和定制化方面提供了更加灵活和强大的解决方案，大大降低了业务代码的复杂度，提升了开发效率和代码质量。

Last updated on
事件总线