1、前言：

通常我们在vue项目中，使用axios是这样的是用的，可以看出来加上类型定义是不太简洁的

创建axios实例，然后导出，在定义接口的地方使用，像下面这样使用
import axios from '@/utils/axios'
import { CartItemType } from '@/types/cart'

/**
 * function: 请求购物车列表
 * @param: 无
 * return：Array
 */
export const getShopCartListApi = (): Promise<ResultType<CartItemType[]>> => {
  return axios({
    url: '/shopCart/listShopCart',
    method: 'get',
  })
}

2、封装get、post方法、delete等方法

封装实现，在axios创建的实例的文件下封装

/**
 * 网络请求: get
 * @param url 请求地址
 * @param params 请求参数
 * @param config 请求设置
 * @returns Promise<ResultData<T>>
 */
export function get<T>(
  url: string,
  params?: object,
  config?: AxiosRequestConfig
): Promise<ResultData<T> | null> {
  return instance.get(url, {
    ...config,
    params: { ...params },
  })
}

/**
 * 网络请求: post
 * @param url 请求地址
 * @param data 请求数据
 * @param config 请求设置
 * @returns Promise<ResultData<T>>
 */
export function post<T>(
  url: string,
  data?: any,
  config?: AxiosRequestConfig
): Promise<ResultData<T> | null> {
  return instance.post(url, data, config)
}

export function del<T>(
  url: string,
  data?: any,
  config?: AxiosRequestConfig
): Promise<ResultData<T> | null> {
  return instance.delete(url, {
    data,
    ...config,
  })
}

基于上面的封装，在使用的使用就可以简洁好多

// 引入封装的get、post方法
import { get, post } from '@/utils/request'
// 引入接口（类型）定义
import {
  AddTaskType，
  editTaskType,
  QueryTaskListType,
  TaskListItemType,
} from './interface'

// 获取任务列表
export function getTaskListApi(query: QueryTaskListType) {
  return get<ResponseList<TaskListItemType>>('/maintainTask/list', query)
}

// 添加任务
export function addTaskApi(data: AddTaskType) {
  return post<boolean>('/maintainTask/save', data)
}

// 详情编辑任务
export function editTaskApi(data: editTaskType) {
  return post<boolean>('/maintainTask/update', data)
}

经过封装使用，起来就会简洁很多，看起来感觉更好，也减少了很多代码量