vite项目中mock和axios封装

• 三个环境的配置(vite获取环境变量import.meta.env.MODE)：导出的config包括当前环境；三个环境配置根据当前环境的返回；全局mock设置
• Mock总开关和单个接口自定义开关（便于接口调试和联调）：isMock是mock是否使用线上mock控制的总开关，如果这里设置true，后面单个接口可以不设置，如果想单独设置false也可以在具体接口中设置，在后续联调时好一次性修改
• 判断是线上环境不能使用mock ，使用线上api

1.环境配置文件

// 获取vite的环境（开发，测试，生产）
const env = import.meta.env.MODE || 'prod';

const envConfig = {
    // 每个环境的api分为baseUrl真实环境的api和mockUrl线上mock环境的url
    "development": {
        baseUrl:"/api",
        mockUrl:"https://www.fastmock.site/mock/e3818dbe977c78b704f2a552c7aafda3/api",
    },
    "test": {
        baseUrl:"/api",
        mockUrl:"https://www.fastmock.site/mock/e3818dbe977c78b704f2a552c7aafda3/api",
    },
    "production": {
        baseUrl:"/api",
        mockUrl:"https://www.fastmock.site/mock/e3818dbe977c78b704f2a552c7aafda3/api",
    }
}

// 导出的config包括当前环境；三个环境配置根据当前环境的返回；全局mock设置
export default {
    env,
    isMock: true, //isMock是mock是否使用线上mock控制的总开关，如果这里设置true，后面单个接口可以不设置，如果想单独设置false也可以在具体接口中设置，在后续联调时好一次性修改
    ...envConfig[env]
}

2.axios + mock封装

注意baseURL不要写成baseUrl

import axios from 'axios';
import config from '@/config/index'
import error from '@/config/error'
import { ElMessage} from 'element-plus'

const instance = axios.create({
    baseURL: config.baseApi,
    timeout: 2000,
    headers: {'X-Custom-Header': 'vite-vue-admin'}
  });

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    const { code, list, msg} = response.data;
    if(code === 200){
        return list;
    }else{
        ElMessage.error(error.NETWORK_ERROR);
        return Promise.reject(error.NETWORK_ERROR);
    }
  }, function (error) {
    return Promise.reject(error);
  });

//   options里面需要有methods,url,data,isMock
const request = (options) => {
    // 对get请求参数进行处理
    let method = options.methods.toLowerCase();
    if(method === 'get')  options.params = options.data;

    // 如果没有设置直接使用baseUrl
    let isMock = config.isMock;
    if (typeof options.isMock !== 'undefined') {
        isMock = options.isMock
      }

      // 如果生成环境强制让其不使用mock接口
    if(config.env == "prod"){
        // 注意配置的是axios的instance.defaults.baseUrl
        instance.defaults.baseURL = config.baseApi;
    }else{
        // config里面有配置总开关isMock，即使config里面配置了isMock为false，如果options里面的isMock为true也要使用mock
        instance.defaults.baseURL = isMock ? config.mockApi : config.baseApi;
    }

    return instance(options);
}

export default request;

3.api.js

import request from "@/api/request"

export const getMenuList = async (data) =>{
    return await request({
        methods:"get",
        url:'/menu/getMenuData',
        data
    });
}

4.main.js全局引入api.js

import * as api from "@/api/api"

  // 将api设置为全局api
app.config.globalProperties.$api = api;

5.vue中使用

import { reactive, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const getMenuList = async () => {
  let list = await proxy.$api.getMenuList();
};
getMenuList();