VUE 全局设置防重复点击

请求后端防止重复点击，用户点击加入遮罩层，请求完毕关闭遮罩层

我们利用请求拦截器，在用户点击的时候，弹出遮罩层
本文采用i18n国际化 + element plus UI，提取你想要的，这里不做简化

完整代码如下：

// src/service/httpService.jsimport axios from 'axios';
import { ElMessage, ElLoading } from 'element-plus';
import i18n from '../i18n';const apiEndpoint = process.env.VUE_APP_API_ENDPOINT;const httpClient = axios.create({baseURL: apiEndpoint + '/api',
});let loadingInstance;// 请求拦截器
httpClient.interceptors.request.use(config => {loadingInstance = ElLoading.service({ fullscreen: true, text: 'Loading...' });const token = localStorage.getItem('token') || sessionStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;
}, error => {if (loadingInstance) loadingInstance.close();return Promise.reject(error);
});httpClient.interceptors.response.use(response => {if (loadingInstance) loadingInstance.close();return response;}, error => {if (loadingInstance) loadingInstance.close();let message = '';let messageType = 'error'; // 默认消息类型if (error.response) {const status = error.response.status;message = error.response.data.message || i18n.global.t('defaultErrorMessage');if (status < 200) {messageType = 'info';} else if (status >= 300 && status < 400) {messageType = 'warning';} else if (status >= 400 && status < 500) {messageType = 'warning';} else if (status >= 500) {messageType = 'error';}} else if (error.request) {message = i18n.global.t('noResponse');messageType = 'error';} else {message = i18n.global.t('requestError');messageType = 'error';}ElMessage({showClose: true, message: message, type: messageType, duration: 5000,});return Promise.reject(error);}
);export const get = async (url, params = {}) => {const response = await httpClient.get(url, { params });return response.data;
};export const post = async (url, data) => {const response = await httpClient.post(url, data);return response.data;
};export default {get,post,
};