记录：VUE3中本地mock和线上请求

request.ts

import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
import { useUserStoreHook } from "@/store/modules/user";
import { ElMessage, ElMessageBox } from 'element-plus'

// 创建 axios 实例
let serviceParams = {
    baseURL: '',
    timeout: 50000,
    headers: { "Content-Type": "application/json;charset=utf-8" }
};

// 导出 axios 实例
export default function request (options:any, defaultParams?:any) {
    return new Promise<any>((resolve, reject) => {
        if(defaultParams){
            serviceParams.baseURL = defaultParams
        } else {
            serviceParams.baseURL = import.meta.env.VITE_APP_BASE_API;
        };
        const service = axios.create(serviceParams);
        // 请求拦截器
        service.interceptors.request.use(
            (config: InternalAxiosRequestConfig<any>) => {
                const accessToken = localStorage.getItem("accessToken");
                if (accessToken) {
                    config.headers.Authorization = accessToken;
                    config.headers.Token = accessToken;
                }
                return config;
            },
            (error: any) => {
                console.log('请求错误拦截：', error);
                return Promise.reject(error);
            }
        );

        // 响应拦截器
        service.interceptors.response.use(
            (response: AxiosResponse<any>) => {
                const { code, msg } = response.data;
                if (code === 0) {
                    return response.data;
                }
                // 响应数据为二进制流处理(Excel导出)
                if (response.data instanceof ArrayBuffer) {
                    return response;
                }
                // 异常处理
                let tips = '';
                if (code === -1) {
                    tips = '服务器异常，稍后再试';
                } else if (code === 1013) {
                    tips = msg;
                } else {
                    tips = '系统未知错误';
                };
                console.log('响应异常拦截：', code, msg);
                ElMessage.error(tips);
                return Promise.reject(new Error(tips));
            },
            (error: any) => {
                if (error.response.data) {
                    const { code, msg } = error.response.data;
                    // token 过期,重新登录
                    if (code === "A0230") {
                        ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
                            confirmButtonText: "确定",
                            type: "warning",
                        }).then(() => {
                            const userStore = useUserStoreHook();
                            userStore.resetToken().then(() => {
                                location.reload();
                            });
                        });
                    } else {
                        let tips = '';
                        if (error.message.indexOf('timeout') != -1) {
                            tips = '网络请求超时';
                        } else if (error.message == 'Network Error') {
                            tips = '网络连接错误，请检查您的网络';
                        } else {
                            tips = '服务器异常，稍后再试';
                        }
                        console.log('响应错误拦截：', code, msg);
                        ElMessage.error(tips);
                    }
                }
                return Promise.reject(error.message);
            }
        );
        service(options, defaultParams).then(res => {
            resolve(res);
        }).catch(error => {
            reject(error)
        })
    })
};

api.ts

import request from "@/utils/request";
import { AxiosPromise } from "axios";
import { IcpacQuery, IcpacVO, IcpacForm, WebTableTreeQuery, WebTableTreeVO, WebTableTreeForm } from './types'

// 本地访问测试环境数据
const serviceParams:any = (import.meta.env.MODE === 'development') ? import.meta.env.VITE_APP_PROXY_BASE_API : undefined;

/**
 * 查询WEB应用列表
 * @param
 * @returns
 */
export function getIcpacWebList(queryParams?: IcpacQuery): AxiosPromise<IcpacVO[]> {
    return request({
        url: "/lowcode/dynamicCreate/queryList/companyApplication/0000",
        method: "post",
        data: queryParams
    }, serviceParams); // 添加 serviceParams 代表从本地代理访问线上地址，否则 访问本地mock地址
}