vue3+ts二次封装axios

utils/http.ts

import axios from "axios";
import type { AxiosRequestConfig, AxiosResponse } from "axios";
const instance = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 5000,
});

instance.interceptors.request.use(
  (config): any => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

interface Data {
  [index: string]: unknown;
  // name:'',
  // age:''
}
interface Http {
  get(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  post(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  put(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  patch(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  delete(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
}
const http: Http = {
  get(url, data, config) {
    return instance.get(url, {
      params: data,
      ...config,
    });
  },
  post(url, data, config) {
    return instance.post(url, data, config);
  },
  put(url, data, config) {
    return instance.put(url, data, config);
  },
  patch(url, data, config) {
    return instance.patch(url, data, config);
  },
  delete(url, data, config) {
    return instance.delete(url, {
      data,
      ...config,
    });
  },
};

instance.interceptors.response.use(
  (response): any => {
    const res = response.data;
    return res;
  },
  (error) => {
    console.log("err" + error);

    return Promise.reject(error);
  }
);
export  default  http;
 

vue页面引入

  import  http from "@/utils/http"; 
  http.post("/users/login", {
    email: "xxx@imooc.com", // 登录邮箱
    pass: "huangrong", // 登录密码
  }).then(res=>{
    console.log(res,'res')
  });

分开使用（把ts和接口部分提取出来）

utils/http.ts

import axios from "axios";
import type { AxiosRequestConfig, AxiosResponse } from "axios";
const instance = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 5000,
});

instance.interceptors.request.use(
  (config): any => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
instance.interceptors.response.use(
  (response): any => {
    const res = response.data;
    return res;
  },
  (error) => {
    console.log("err" + error);

    return Promise.reject(error);
  }
);
export  default  instance

api/login.ts

import instance from "@/utils/http";
import type { AxiosRequestConfig, AxiosResponse } from "axios";

interface Data {
  [index: string]: unknown;
  // name:'',
  // age:''
}
interface Http {
  get(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  post(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  put(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  patch(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
  delete(
    url: string,
    data: Data,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse>;
}
const http: Http = {
  get(url, data, config) {
    return instance.get(url, {
      params: data,
      ...config,
    });
  },
  post(url, data, config) {
    return instance.post(url, data, config);
  },
  put(url, data, config) {
    return instance.put(url, data, config);
  },
  patch(url, data, config) {
    return instance.patch(url, data, config);
  },
  delete(url, data, config) {
    return instance.delete(url, {
      data,
      ...config,
    });
  },
}; 
export  default  http;

vue使用

import  http  from "../../api/login";  
 http.post("/users/login", {
  email: "xxx@imooc.com", // 登录邮箱
  pass: "huangrong", // 登录密码
}).then(res=>{
  console.log(res,'res')
});

其他方式(带方法eg:点击事件)
utils/http.ts**

import axios from "axios";
import type { AxiosRequestConfig, AxiosResponse } from "axios";
const instance = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 5000,
});

instance.interceptors.request.use(
  (config): any => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
instance.interceptors.response.use(
  (response): any => {
    const res = response.data;
    return res;
  },
  (error) => {
    console.log("err" + error);

    return Promise.reject(error);
  }
);
export  default  instance

login.ts

import instance from "@/utils/http";
import type { AxiosRequestConfig, AxiosResponse } from "axios";

  interface Data {
    [index: string]: unknown;
  }
//  interface Logins {
//    login(url:string,data: Data,config?:AxiosRequestConfig): Promise<AxiosResponse>;
//  }
   const lo= {
    login(url,data,config) {
      return instance.post(url,data ,config);
    },
  };
  export default lo

vue使用

  import  lo  from "../../api/login";
   const Login=()=>{
    lo.login("/users/login", {
    email: "xxx@imooc.com", // 登录邮箱
    pass: "huangrong", // 登录密码
  }).then(res=>{
   console.log(res,'res')
  });
}