axios ts 封装

主文件
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getToken } from '@/utils/auth';
import { useUserStoreHook,useUserStore } from '@/store/modules/user';
// import { useUserStore } from '@/store/modules/user';

// 创建 axios 实例
const service = axios.create({
  baseURL: '',
  timeout: 50000,
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
});

// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    if (!config.headers) {
      throw new Error(
        `Expected 'config' and 'config.headers' not to be undefined`
      );
    }
    const user = useUserStoreHook();
    if (user.token) {
      (config.headers as any)['Access-Token'] = getToken();
    }
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    console.log(response)
    const { status, message } = response;
    if (status === 200) {
      return response.data;
    } else {
      // 响应数据为二进制流处理(Excel导出)
      if (response.data instanceof ArrayBuffer) {
        return response;
      }

      ElMessage({
        message: message || '系统出错',
        type: 'error'
      });
      return Promise.reject(new Error(message || 'Error'));
    }
  },
  (error: any) => {
    if (error.response.data) {
      console.log(error)
      console.log(error.response)
      const {status } = error.response;
      const {message } = error.response.data;
      console.log(error.response.data)
      // token 过期,重新登录
      if (status === 401) {
        ElMessageBox.confirm('当前页面已失效，请重新登录', '提示', {
          confirmButtonText: 'OK',
          type: 'warning'
        }).then(() => {
          //xxxxxxxxxxxxxxxxxxxxxxxxxxx
          
          useUserStoreHook().PassiveExit().then((res) => {
            localStorage.clear();
          window.location.href = '/';
            // tagsViewStore.delAllViews();
            // router.push(`/login?redirect=${route.fullPath}`);
          })
        });
      } else {
        ElMessage({
          message: message || '系统出错',
          type: 'error'
        });
      }
    }
    return Promise.reject(error.message);
  }
);

// 导出 axios 实例
export default service;

api文件
import request from '@/utils/request';
/**
 * 
 *
 * @param queryParams
 */
 export function agriculturalProductDictionary() {
  return request({
    url: '/grain-smart-hub-api/system-setting/farm-produces',
    method: 'get',

  });
}

api 页面使用
import { agriculturalProductDictionary,CurrentVariety,updateVariety } from '@/api/systemSetApi';
agriculturalProductDictionary().then(({ data }) => {
    getCurrentData()
    dictionaryList.value = data;
    
  });

vite.config.ts文件
import { UserConfig, ConfigEnv, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default ({ mode }: ConfigEnv): UserConfig => {
  // 获取 .env 环境配置文件
  const env = loadEnv(mode, process.cwd());

  return {
    plugins: [
      vue(),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
      })
    ],
    // 本地反向代理解决浏览器跨域限制
    server: {
      host: '0.0.0.0',
      port: Number(env.VITE_APP_PORT),
      open: false, // 运行自动打开浏览器
      proxy: {
        // [env.VITE_APP_BASE_API]: {
        //   // 线上API地址
        //   target: 'http://vapi.youlai.tech',
        //   // 本地API地址
        //   // target: 'http://localhost:8989',
        //   changeOrigin: true,
        //   rewrite: path =>
        //     path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
        // },
        '/grain-smart-hub-api': {
          target: "http://172.16.92.54",
          changeOrigin: true
        },
      }
    },
    resolve: {
      // Vite路径别名配置
      alias: {
        '@': path.resolve('./src')
      }
    }
  };
};

代码块

代码块