隐藏
«

vue3请求封装

时间:2024-12-24 20:01     作者:suxiaojun     分类:


/**
 * axios setup to use mock service
 */

    import axios from 'axios';
    import { ElMessage } from 'element-plus';
    import { router } from '@/router'
    // 引入i18
    import { i18n } from '@/utils/i18n';

    // 获取浏览器默认语言
    const defaultLanguage = navigator.language;

    // 获取本地存储语言
    const localStorageLanguage = localStorage.getItem('language')
    // 优先使用本地存储语言
    let useLanguage = localStorageLanguage ? localStorageLanguage : defaultLanguage
    let regex = /cn/i

    const service = axios.create({
      baseURL: import.meta.env.VITE_BASE_API, // 所有的请求地址前缀部分
      timeout: 60000 // 请求超时时间(毫秒)
    });

    // 请求拦截
    service.interceptors.request.use(
      (config) => {
        //设置 token
        config.headers.Authorization = localStorage.getItem('jwt_token'); //token  代表从后台传过来的cookie的令牌
        config.headers['Language'] = regex.test(useLanguage) ? 'cn' : 'en' // 判断浏览器默认语言是否包含CN(表示中国)

        // config.headers['Content-Type'] = 'application/json';
        // config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        if (config.method === 'get' && config.params) {
          let url = config.url + '?';
          let keys = Object.keys(config.params);
          for (let key of keys) {
            url += `${key}=${encodeURIComponent(config.params[key])}&`;
          }
          url = url.slice(0, -1);
          config.params = {};
          config.url = url;
        }
        return config;
      },
      (err) => {
        return Promise.reject(err);
      }
    );
    let isMessageShown = false; // 标识变量,避免多次提示
    // 响应拦截
    service.interceptors.response.use(
      (response) => {
        const data = response.data;
        // 如果后台返回的报错码和报错信息的话
        if (data.code === 0 || data.code === 200) {
          return data;
        } else if (data.code >= 1500 && data.code <= 1511) {
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识,避免多次提示
            ElMessage({
              type: 'error',
              message: data.message || data.msg,
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
          return data;
        } else {
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识,避免多次提示
            ElMessage({
              type: 'error',
              message: data.message || data.msg,
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
          return data;
        }
      },
      (error) => {
        if (error.response.status === 401) {
          localStorage.removeItem('jwt_token');
          localStorage.removeItem('userInfo');
          router.push('/auth/login')
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识,避免多次提示
            ElMessage({
              type: 'error',
              message: i18n.global.t('No Login'),
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
        } else if (error.response.status === 50003) {
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识,避免多次提示
            ElMessage({
              type: 'error',
              message: '服务器维护中',
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
        } else {
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识,避免多次提示
            ElMessage({
              type: 'error',
              message: error,
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
        }
      }
    );

    export default service;