axios二次封装

163 阅读1分钟

改写axios的返回值的TS类型

  • axios的二次封装,让axios和TS类型组合使用时更加方便

Axios 内置类型声明解读

// 1. Axios 实例类型
export class Axios {
  // ...省略
  request<T = any, R = AxiosResponse<T>>(config): Promise<R>;
  get<T = any, R = AxiosResponse<T>>(url: string, config): Promise<R>;
}

// 2. AxiosResponse 返回值类型
export interface AxiosResponse<T = any, D = any>  {
  data: T;
  // ...省略
}

image-20220218165657044.png

TS类型封装

import axios, { type Method } from "axios";

...
export interface ApiRes<T = unknown> {
    code: string;
    msg: string;
    result: T;
}

/**
 * axios 二次封装,整合 TS 类型
 * @param url  请求地址
 * @param method  请求类型
 * @param submitData  对象类型,提交数据
 */
export const http = <T>(method: Method, url: string, submitData?: object) => {
  return instance.request<ApiRes<T>>({
    url,
    method,
    [method.toUpperCase() === "GET" ? "params" : "data"]: submitData,
  });
};

export default instance;