import axios, { AxiosRequestConfig, AxiosRequestHeaders } from 'axios'; import { showMessage } from './status'; // 引入状态码文件 import { ElMessage, ElMessageBox } from 'element-plus' // 引入el 提示框,这个项目里用什么组件库这里引什么 import { useAppStore } from '@/stores/index' import router from '@/router' // 设置接口超时时间 axios.defaults.timeout = 60000; console.log(import.meta.env.VITE_API_URL); // 请求地址,这里是动态赋值的的环境变量,下一篇会细讲,这里跳过 // @ts-ignore axios.defaults.baseURL = import.meta.env.VITE_API_URL//import.meta.env.VITE_API_URL; http://192.168.8.103:9999 https://apidoc.raycos.net // 请求拦截器 axios.interceptors.request.use(function (config) { const store = useAppStore(); config.headers['Content-Type'] = 'application/json;charset=UTF-8'; // 统一设置用户身份 token if (store.user && store.user.token) { (config.headers as AxiosRequestHeaders).Authorization = `Bearer ${store.user.token}` } return config }, function (error) { return Promise.reject(error) }) // 控制登录过期的锁(是否正在处理登录过期) let isRefreshing = false let isShowingError = false; // 响应拦截器 axios.interceptors.response.use(function (response) { // 统一处理接口响应错误,如 token 过期无效、服务端异常等 const status = response.data.status const store = useAppStore(); /* 正确响应 */ if (!status || status === 200) { return response } /* 错误响应 */ // 登录过期处理 if (status === 401) { if (isRefreshing) return Promise.reject(response) isRefreshing = true ElMessageBox.confirm('登录已过期,您可以取消停留在此页面,或确认重新登录', '登录过期', { confirmButtonText: '确认', cancelButtonText: '取消' }) .then(() => { // 清除本地登录状态 store.setUser(null) // 跳转到登录页 router.push({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } }) }) .catch(() => { }) .finally(() => { isRefreshing = false }) // 抛出异常 return Promise.reject(response) } // 其他错误响应 return response; }, function (error) { const { response } = error; if (response) { // 请求已发出,但是不在2xx的范围 showMessage(response.code); // 传入响应码,匹配响应码对应信息 ElMessage.error(response.data.message || '请求失败,请稍后重试'); return Promise.reject(response.data); } else { // 处理网络错误或请求未发出的情况 // 处理网络错误或请求未发出的情况 if (!isShowingError) { isShowingError = true; //ElMessage.error('网络连接异常,请稍后再试!'); setTimeout(() => { isShowingError = false; // 重置标志位 }, 3000); // 3秒后允许再次显示错误 } return Promise.reject(error); } }) // 封装 GET POST 请求并导出 export function request(url = '', params = {}, type = 'POST') { //设置 url params type 的默认值 return new Promise((resolve, reject) => { let promise // 根据请求类型设置请求方法 switch (type.toUpperCase()) { case 'GET': promise = axios({ url, params, method: 'GET' }); break; case 'POST': promise = axios({ url, data: params, method: 'POST' }); break; case 'PUT': promise = axios({ url, data: params, method: 'PUT' }); break; default: promise = axios({ url, data: params, method: 'POST' // 默认为POST }); } //处理返回 promise.then(res => { resolve(res) }).catch(err => { reject(err) }) }) }