typescript封装axios

光影星宸 / 2023-05-11 / 原文

import axios, { AxiosRequestConfig, Method } from 'axios'

const service = axios.create({
  baseURL: '/api',
  timeout: 5000
})

// 请求拦截器,一般用来设置请求头信息
service.interceptors.request.use(config => {
  return config
})

// 响应拦截器,处理后台返回的数据
service.interceptors.response.use(resp => {
  return resp.data
})

/** 接口的返回值类型 */
type Result<T> = {
  code: 200 | 404 | 500
  msg?: string
  data?: T
}

// 因为TS有类型约束,所以外面再包一层函数,用来做类型约束,这样在使用的时候就有类型推断了
const request = <T = any>(
  url: string,
  method: Method,
  submitData: object,
  config?: AxiosRequestConfig
) =>  service<T, Result<T>>({
        url,
        method,
        // get请求用params接收,其他请求用data
        [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData,
        // 其他配置项
        ...config
      })
export default request