VUE 全局设置防重复点击

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

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

完整代码如下：

// src/service/httpService.js

import 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,
};