如何使用TS对axios的进行简单封装

npm i axios

//引入axios
import axios from 'axios'

//使用指定配置创建axios实例
const instance = axios.create({
  // 基础路径
  baseURL: 'Http://pcapi-xiaotuxian-front-devtest.itheima.net/',
  // 请求超时时间
  timeout: 5000,
  // ....其他配置
})

axios({
  url: 'http://',
  method: 'post',
  data: {}
  // ....
})

axios({
  url: 'http://',
  method: 'post',
  data: {}
}).then((response) => {
  console.log(response.data)
})

// 后台给我们的数据类型如下
// 泛型T指定了Response类型中result的类型，默认为any
type Response<T = any> = {
  // 描述
  msg: string
  // 返回的数据
  result: T
}

// AxiosRequestConfig从axios中导出的，将config声明为AxiosRequestConfig，这样我们调用函数时就可以获得TS带来的类型提示
// 泛型T用来指定Reponse类型中result的类型
export default <T> (config: AxiosRequestConfig) => {
  // 指定promise实例成功之后的回调函数的第一个参数的类型为Response<T>
  return new Promise<Response<T>>((resolve, reject) => {
    // instance是我们在上面创建的axios的实例
    // 我们指定instance.request函数的第一个泛型为Response，并把Response的泛型指定为函数的泛型T
    // 第二个泛型AxiosResponse的data类型就被自动指定为Response<T>
    // AxiosResponse从axios中导出的，也可以不指定，TS会自动类型推断
    instance.request<Response<T>>(config).then((response: AxiosResponse<Response<T>>) => {
      // response类型就是AxiosResponse<Response<T>>，而data类型就是我们指定的Response<T>
      // 请求成功后就我们的数据从response取出并使返回的promise实例的状态变为成功的
      resolve(response.data)
    }).catch((error :any) => {
      // 请求失败的处理
      reject(error)
    })
  })
}

import request from "@/utils/request";

// 商品分类
export interface CateGory {
  id: string;
  name: string;
  picture: string;
  children: Category[];
  goods: CategoryGoods[];
}
// 商品分类下的商品
export interface CategoryGoods {
  id: string;
  name: string;
  desc: string;
  price: string;
  picture: string;
}


export const reqGetCategory = () => {
  // 指定我们封装的request函数的第一个泛型的类型为Category[]，也就是指定 Response<T> 中T的类型
  return request<Category[]>({
    url: '/home/category/head',
    method: 'get'
  })
}