typescript简单封装axios

前言

最近在学习vue3和typescript，在用到axios的时候遇到了一点问题。之前vue2项目中是简单封装过axios，配置和使用比直接用会方便一些。到了vue3+ts项目中，我也直接将封装文件拿来用，也确实能用。但是axios返回的值的类型与我预期的大不相同，导致我想获取接口返回的数据就会报ts错误，错误提示返回值上不存在"xxx"属性。这是因为返回值类型没有定义，其实这个类型错误并不影响js运行，一样可以拿到接口返回值并使用，但是我不能接受。查找了很多文章，有些可能是代码没贴全导致报了更多的错，有些则是封装的过于抽象无法理解导致我望而却步，最后我还是找到了我需要的。

代码

首先感谢大佬的文章，原文链接，提供的代码确实是开箱即用，我这里根据自己的业务做了点微调，axios.ts代码：

// axios.ts
import axios, {
    AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
import {
    Dialog } from 'vant'
// 数据返回的接口
// 定义请求响应参数，不含data
interface Result {
   
  code: number;
  msg: string
}

// 请求响应参数，包含data
interface ResultData<T = any> extends Result {
   
  data?: T;
}
const URL: string = '你的项目url'
enum RequestEnums {
   
  TIMEOUT = 20000,
  SUCCESS = 200, // 请求成功
}
const config = {
   
  // 默认地址
  baseURL: URL,
  // 设置超时时间
  timeout: RequestEnums.TIMEOUT,
  // 跨域时候允许携带凭证
  // withCredentials: true
}

class RequestHttp {
   
  // 定义成员变量并指定类型
  service: AxiosInstance;
  public constructor(config: AxiosRequestConfig) {
   
    // 实例化axios
    this.service = axios.create(config);

    /**
     * 请求拦截器
     * 客户端发送请求 -> [请求拦截器] -> 服务器
     * token校验(JWT) : 接受服务器返回的token,存储到vuex/pinia/本地储存当中
     */
    this.service.interceptors.request.use