Ts简单封装axios，亲测好用~

vue3 + vite + ts项目

• 首先那必然是先安装axios
• npm i axios

话不多说，直接上代码了。 request.ts

import axios from 'axios'
import type {AxiosError, AxiosInstance, AxiosResponse, AxiosRequestConfig, InternalAxiosRequestConfig} from 'axios'
import type {IResult} from '@/types/axios'
import {message as Message} from 'ant-design-vue'
// 创建axios实例对象
const instance: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10 * 1000
})
// 请求拦截器
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  const token = sessionStorage.getItem("news-html-token")
  token && (config.headers.Authorization = ("Bearer " + token))
  return config
}, (error: AxiosError) => {
  return Promise.reject(error)
})
// 响应拦截器
instance.interceptors.response.use((response: AxiosResponse<IResult>) => {
  const {code, data, message} = response.data
  if (code === 200) {
    return data
  }
  Message.error(message)
  return Promise.reject(new Error(message))
}, (error: AxiosError<IResult>) => {
  const {message = "系统繁忙"} = error?.response!.data
  Message.error(message)
  return Promise.reject(error)
});
const http = {
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return instance.get(url, config)
  },
  post<T = any>(url: string, data?: object, config?: AxiosRequestConfig): Promise<T> {
    return instance.post(url, data, config)
  },
  put<T = any>(url: string, data?: object, config?: AxiosRequestConfig): Promise<T> {
    return instance.put(url, data, config)
  },
  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return instance.delete(url, config)
  }
}
export default http

这里是把get、post、put、delete请求封装了一下。供外部使用。主要是为了获取ts更友好的提示。

index.ts

import http from "@/utils/request"
import type {LoginAPI} from "./type"
import type {ILoginResponse} from '@/types/login'
/**
 * 登录接口
 * @param data
 */
export function loginAPI(data: LoginAPI) {
  return http.post<ILoginResponse>('/user/login', data);
}

这里写的时候指定好你的类型，在vue文件调用请求的时候就会有相对应的提示。

贴一下我的类型代码

• index.vue 测试

可以看到都有提示了，真的是非常的舒服啊，当你写错单词了 也会爆红线的。

• 上面只是封装了一个基础版本的axios，如果你需要全屏加载loading等只需要在这个架子上去添加就好了。