使用typescript封装axios支持接口返回值类型提示和检查

axios: 0.27.1
typescript: 4.1.5

request.ts

import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
const service = axios.create({
//  baseURL,timeout
// 一些axios的基础配置，如baseUrl、超时时间等
});

// 拦截器的配置按照自己的需求来，不做赘述，网上可以找到各种成熟的方案
service.interceptors.request.use()
service.interceptors.response.use() 

// 定义服务端接口返回的接口格式，其中data是主要数据
type Response<T = any> = {
  massage?: string;
  code: number;
  data: T;
};


export default <T>(config: AxiosRequestConfig) => {
  return new Promise<Response<T>>((res, rej) => {
    service
      .request<Response<T>>(config)
      .then((response) => {
        res(response.data);
      })
      .catch((err: any) => {
        rej(err);
      });
  });
};
// 定义一个导出方法，用此处的泛型T来进行接口数据类型的定义，因为在axios实例上有request函数可以传入泛型
//如下图

定义接口数据类型

import request from './request';

interface LIST {
  id: number;
  name: string;
}
const url = '/list';
request<LIST>({
  url
}).then((res)=> {
  res.data.id
})

编辑器已经有了返回数据字段的提示