Vue3 request请求案例

Vue\vue3_admin\src\utils\request.ts

// 进行axios 二次封装：使用请求与响应拦截器
import axios from "axios";
import { ElMessage } from "element-plus";
import { GET_TOKEN } from '@/utils/token';
// import pinia from "@/stores";
// import useUserStore from '@/stores/modules/user'

// 创建axios实例
const request = axios.create({
    baseURL: import.meta.env.VITE_SERVER + import.meta.env.VITE_APP_BASE_API,    // 基础路径上会携带host/api
    timeout: 5000    // 超时时间配置
})

// const userStore = useUserStore(pinia)
// 会存在数据复制，导致数据不同步
// token存储在localStorage
// const token = localStorage.getItem('TOKEN');
// const token = GET_TOKEN();
// // const token = userStore.token;
// console.log('TOKEN', token);

// 请求拦截器
request.interceptors.request.use((config) => {
    // 返回配置对象，config配置对象，headers属性请求头，经常给服务器端携带公共参数
    // console.log('config', config);
    // config.headers['Access-Control-Allow-Origin'] = "*"
    if (GET_TOKEN()) {
        config.headers['Token'] = GET_TOKEN()
    }

    return config;
});

// 响应拦截器
request.interceptors.response.use((response) => {
    // 成功的回调
    return response.data;
}, (error) => {
    // 失败的回调，处理网络错误
    let msg = '';
    const status = error.response.status;
    switch (status) {
        case 401:
            msg = "token过期";
            break;
        case 403:
            msg = '无权访问';
            break;
        case 404:
            msg = "请求地址错误";
            break;
        case 500:
            msg = "后端服务异常，请尝试刷新或重新登录！";
            break;
        default:
            msg = "网络故障";
            break;
    }
    ElMessage({
        type: 'error',
        message: msg
    })
    return Promise.reject(error);
});

// 对外暴露
export default request;

Vue\vue3_admin\src\api\acl\user\type.ts

//用户管理相关数据的ts类型
// 用户数据ts类型
export interface UserData {
  id?: string | number, // 用户ID
  username: string, // 登录名
  nickName: string, // 用户昵称
  password?: string, // 登录密码
  state?: string, // 用户状态
  userLevel?: string | number, // 用户等级
  role?: string, // 生产者标识
  role_id?: string | number, // 角色ID
  role_name?: string,
  avatar?: string, // 用户头像
  create_time?: string, // 创建时间
  update_time?: string, // 更新时间
}

interface getUserListDataType {
  message: string,
  time: string,
  records: UserData[],
  total: number,
  size: number,
  current: number,
  searchCount: boolean,
  pages: number,
}

export interface getUserListResponseData {
  code: number,
  data: getUserListDataType,
}

interface getUserInfoDataType {
  message: string,
  time: string,
  records: UserData,
}

// 获取用户详情接口的ts类型
export interface getUserInfoResponseData {
  code: number,
  data: getUserInfoDataType,
}

// 角色与职责岗位的ts类型
export interface groupData {
  id: number,  // ID
  gid: number, // 角色固定ID
  group_name: string, // 角色名
  create_time?: string,
  update_time?: string,
  remark?: string, // 备注
}
export interface roleData {
  id?: number | string,  // ID
  role_name: string, // 岗位名
  create_time?: string,
  update_time?: string,
  remark?: string, // 备注
}

// 包含当前用户全部职责数据的ts类型
export type roleDataList = roleData[];

interface getRolesDataType {
  message: string,
  time: string,
  assignRoles: roleDataList,
  allRolesList: roleDataList,
}

// 获取用户角色与职责的详情接口的ts类型
export interface getRolesResponseData {
  code: number,
  data: getRolesDataType,
}

// 给用户分配职责岗位接口携带参数的ts类型
export interface setRolesData {
  userRolesList: number[],
  userId: number
}

Vue\vue3_admin\src\api\acl\user\index.ts

// 用户管理相关模块接口
import request from '@/utils/request'
import type { responseData } from '@/api/user/type'
import type { getRolesResponseData, getUserListResponseData, setRolesData, UserData } from './type'

// 用户管理的相关请求地址
enum API {
    // 查询已有用户信息
    USER_URL = '/acl/user',
    // 新增用户
    ADD_USER = '/acl/user/save',
    // 修改用户
    UPDATE_USER = '/acl/user/update',
    // 删除已有的用户信息
    DEL_USER_INFO = '/acl/user/deleteUser',
    // 批量删除已有的用户信息
    DEL_MUL_USER_INFO = '/acl/user/deleteMultipleUser',
    // 获取全部职位，以及当前账号拥有的职位接口
    ALL_DUTY_URL = '/acl/user/roles',
    // 更新用户职责岗位
    UPDATE_USER_DUTY = '/acl/user/updateRoles',
}
// 获取用户信息的请求
export const reqAllUserList = (page: number, limit: number) => request.get<any, getUserListResponseData>(API.USER_URL + `/${page}/${limit}`)

// 搜索用户信息的请求
export const reqSearchUserList = (page: number, limit: number, data: any) => request.post<any, getUserListResponseData>(API.USER_URL + `/${page}/${limit}`, data)

// 新增用户或更新用户的接口
export const reqAddOrUpdateUser = (data: UserData) => {
    // 携带参数有ID则为更新
    if (data.id) {
        return request.post<any, responseData>(API.UPDATE_USER, data)
    } else {
        // 新增
        return request.post<any, responseData>(API.ADD_USER, data)
    }
}

// 删除用户的接口
export const reqDelUserInfo = (id: number) => request.get<any, responseData>(API.DEL_USER_INFO + `/${id}`)

// 批量删除用户的接口
export const reqMulDelUserInfo = (data: number[]) => request.post<any, responseData>(API.DEL_MUL_USER_INFO, data)

// 获取当前用户已有的职位与全部职位的请求接口
export const reqUserRoles = (id: number) => request.get<any, getRolesResponseData>(API.ALL_DUTY_URL + `/${id}`)

// 更新用户职责岗位的请求接口
export const reqUpdateUserRoles = (data: setRolesData) => request.post<any, responseData>(API.UPDATE_USER_DUTY, data)