| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- 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)
- })
- })
- }
|