基于Typescript泛型(generics)简单封装axios

• 首先创建axios的实例：

import axios , { AxiosRequestConfig, AxiosResponse } from 'axios'
const axiosInstance = axios.create()

• 然后就是核心方法了：

function Request<T = unknown>(
  configParam: AxiosRequestConfig
) {
  return axiosInstance.request<T, AxiosResponse<T>>(configParam)
}
export { Request }

• 你还可以在Request的基础上，根据请求类型再封一层，比如Get：

function Get<T>(url: string , params = {}) {
  return Request<T>({ url, params, method: 'get' })
}

• 使用例子：

import { Request } from '@/utils/axios'

export const LoginPost = (loginForm: {
  username: string
  password: string
}) => {
  return Request<BaseResponse>({
    url: '/v1/login',
    method: 'POST',
    params: loginForm
  })
}

但我们有时可能需要再封一层promise，那么可以这样写：

function Request<T = unknown>(configParam: AxiosRequestConfig): Promise<AxiosResponse<T>> {
  return new Promise((resolve) => {
    axiosInstance.request<T, AxiosResponse<T>>(configParam).then((res) => {
      resolve(res)
    })
  })
}

如果想去掉axios的那层data，那么可以这么写：

function Request<T = unknown>(configParam: AxiosRequestConfig): Promise<T> {
  return new Promise((resolve) => {
    axiosInstance.request<T, AxiosResponse<T>>(configParam).then((res) => {
      resolve(res.data)
    })
  })
}