TS二次封装Axios

// 使用TS二次封装axios,添加拦截器和类型约束
import axios from 'axios'
import type { AxiosRequestConfig, Method, HttpStatusCode } from 'axios'

// 创建axios实例对象并进行基础配置
const service = axios.create({
  baseURL: '/api',
  timeout: 5000
})

// 设置请求拦截器,一般用来设置请求头,如token等
service.interceptors.request.use(
  config => {
    // 添加请求头等操作
    return config
  },
  error => Promise.reject(error)
)

// 设置响应拦截器,一般用来处理后台返回的数据
service.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error)
)

// 定义返回数据的类型
type Result<T> = {
  code: HttpStatusCode
  msg?: string
  data?: T
}

// 为了添加参数的类型约束,给service再包裹一层函数
const request = <T = any>(
  url: string,
  method: Method = 'get',
  submitData?: Object,
  config?: AxiosRequestConfig
) =>
  service<T, Result<T>>({
    url,
    method,
    // get请求用params接收,其他请求用data
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData,
    ...config
  })

export default request

posted @   光影星宸  阅读(221)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示