【慧游鲁博】【4】小程序端HTTP请求封装优化-CSDN博客

本文链接：https://blog.csdn.net/weixin_73004756/article/details/147529845

文章目录

一、原始实现分析

原始的http.ts文件已经实现了基本功能：

请求拦截器处理URL拼接、超时设置和请求头添加
基本的响应处理逻辑
简单的错误处理

但存在以下不足：

数据结构与后端不完全匹配
错误处理不够细致
缺少便捷方法
类型定义不够完善
401处理逻辑重复

二、核心修改点详解

1. 数据结构重构

修改前：

type Data<T> = {
  code: string
  msg: string
  result: T
}

修改后：

interface ResultData<T> {
  code: number       // 业务状态码
  message: string    // 提示信息
  data: T           // 响应数据
}

意义：

字段名与后端Result.java完全一致(code/message/data)
code类型从string改为number，匹配后端的Integer
使用interface替代type，更适合对象类型定义

2. 双层状态码处理

修改内容：

if (res.statusCode >= 200 && res.statusCode < 300) {
  const data = res.data as ResultData<T>
  
  if (data.code === 200) {
    resolve(data.data)
  } 
  else if (data.code === 401) {
    handleUnauthorized()
    reject(data)
  }
  else {
    // 业务错误处理
  }
}

意义：

区分HTTP状态码(2xx/4xx/5xx)和业务状态码(200/401等)
符合RESTful API设计规范
更精确的错误分类处理

3. 提取公共未授权处理方法

新增方法：

function handleUnauthorized() {
  const memberStore = useMemberStore()
  memberStore.clearProfile()
  uni.navigateTo({ url: '/pages/login/login' })
  uni.showToast({
    icon: 'none',
    title: '登录已过期，请重新登录',
  })
}

意义：

消除重复代码（原先在多个地方处理401）
统一未授权处理逻辑
添加用户友好的提示信息

4. 便捷方法封装

新增方法：

export const get = <T>(url: string, data?: object) => {
  return http<T>({
    url,
    method: 'GET',
    data,
  })
}

// 类似的post/put/del方法...

意义：

简化常用HTTP方法调用
统一请求配置
提高代码可读性
减少重复代码

5. 文件上传封装

新增方法：

export const upload = <T>(url: string, filePath: string, name: string, formData?: object) => {
  // 实现细节...
}

意义：

统一文件上传接口
处理上传特有的响应解析
提供类型安全的返回结果

三、类型系统增强

改进点：

更精确的泛型参数传递
分离请求参数类型和返回数据类型
完善的Promise类型定义

示例：

// 明确指定返回数据类型
get<{id: string, name: string}>('/api/user/info')
  .then(user => console.log(user.name))

意义：

更好的类型推断
更早发现类型错误
提升IDE自动补全能力

四、错误处理优化

改进内容：

区分网络错误、HTTP错误和业务错误
统一错误提示格式
保留原始错误对象

错误处理流程：

五、实践示例

API文档化

/**
 * 获取用户信息
 * @param userId 用户ID
 * @returns 用户详细信息
 */
export function getUserInfo(userId: string) {
  return get<UserInfo>(`/api/user/${userId}`)
}

错误分类处理

try {
  const data = await get<Data>('/api/data')
} catch (error) {
  if (error instanceof NetworkError) {
    // 处理网络错误
  } else if (error instanceof BusinessError) {
    // 处理业务错误
  }
}

请求拦截增强

// 添加请求日志
httpInterceptor.invoke = (options) => {
  console.log(`请求发起: ${options.url}`)
  // 原有逻辑...
}

六、总结

通过对http.ts的改造，我们实现了：

前后端数据结构的完美匹配
更健壮的错误处理机制
更友好的开发者体验
更强大的类型系统支持
更统一的用户交互体验

这些改进使得我们的HTTP请求层不再是简单的功能实现，而是一个真正专业、可靠的基础设施。它不仅满足了当前需求，还为未来的扩展打下了坚实基础。