首先我们简单来二次封装一个 axios 请求：
utils / request / index.ts
import axios from 'axios' let request = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 5000 }) request.interceptors.request.use((config) => { // config配置对象中的一个重要属性 headers 请求头, 通常用来给服务其携带公共参数 return config }) request.interceptors.response.use((response) => { return response.data // 简化请求回来的数据 }, (error) => { // 失败回调：处理 http 网络错误 let message = '' let status = error.response.status switch (status) { case 401: message="身份验证过期，请重新登录" break case 403: message="你无权访问" break case 404: message="资源没有找到" break case 500: message="服务器出现故障" } return Promise.reject(error) // 终结 Promise 链 }) export default request
在 src 目录下新建一个 api 文件夹
这里就以 user 模块为例：
index.ts：管理 user 模块相关的接口
那么 type.ts 是做什么用的呢？
接口在发起请求的时候可能是会携带参数的，以及服务器返回的数据等等这些都是需要被定义数据的类型的，因此该配置文件的作用就体现出来了。
type.ts
// req-登录接口 // 携带参数的数据类型 export interface loginForm { username: string, password: string } // 返回的数据的数据类型 interface dataType { token: string } export interface loginResponseData { code: number, data: dataType } // req-用户信息获取接口 // 返回的数据的数据类型 interface userInfo { userId: number, avatar: string, username: string, password: string, desc: string, roles: string[], buttons: string[], routes: string[], token: string } interface user { checkUser: userInfo } export interface userResponseData { code: number, data: user }
接口定义：
import request from '@/utils/request/index.ts' import type { loginForm, loginResponseData, userResponseData } from "@/api/user/type.ts"; // 枚举请求接口地址 enum API { LOGIN_URL= '/user/login', USERINFO_URL = '/user/info' } export const reqLogin = (data: loginForm) => request.post<any, loginResponseData>(API.LOGIN_URL, data) // req-登录接口 export const reqUserInfo = () => request.get<any,userResponseData>(API.USERINFO_URL) // req-获取用户信息接口
