首先我们简单来二次封装一个 axios 请求：
utils / request / index.ts
代码语言：javascript复制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
代码语言：javascript复制// 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
}接口定义：
代码语言：javascript复制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-获取用户信息接口
