记一个有意思的写法

api.js

import { request } from '@fesjs/fes';
import { ref, isRef } from 'vue';
import { FMessage } from '@fesjs/fes-design';

const postApiWithBizUrl = {
    // 查询产品
    productQuery: '/product/query',
    // 添加/修改产品
    productOperate: '/product/operate',
    // 查询审批链
    approvalQuery: '/approval/query',
    // 查询文章
    articleQuery: '/article/query',
    // 删除文章
    articleDelete: '/article/delete',
    // 撤回文章
    withdraw: '/article/withdraw',
    // 添加/修改文章
    articleOperate: '/article/operate',
    // 查询权限
    umQuery: '/um/query',
    // 发布
    publish: '/publish',
    // 提交审批
    approvalCommit: '/approval/commit',
    // 下架
    offshelve: '/offshelve',
    // 添加标签
    tagInsert: '/tag/insert',
    // 取消发布
    unpublish: '/unpublish',
    // 查询单组标签
    tagQuery: '/tag/query',
    // 配置临期提醒
    articleConfigremind: '/article/configremind',
    // 删除临期提醒
    articleDeleteremind: '/article/deleteremind',
};

const getApiMap = {
    // 下载文件
    fileDownload: '/file/download',
    // 下载产品信息管理模板
    jrxxProductInfoTmplDownload: '/article/query/jrxx_pi/productinfo/download',
};

const postApiMap = {
    // 查询产品信息
    queryJrxxProductInfo: '/article/query/jrxx_pi/productinfo',
    // 查询复核记录 核查页面补上/check前缀  /check/query
    checkQuery: '/query',
    // 导航菜单查询单独使用查询待核查数据
    checkQueryVerified: '/check/query',
    // 查询变更记录-产品信息配置
    queryJrxxProductInfoHistory: '/article/operate/jrxx_pi/productinfo/history',
    // 更新产品信息配置
    operateJrxxProductInfo: '/article/operate/jrxx_pi/productinfo',
    // 核查操作 核查页面补上/check前缀  /check/operate
    checkOperate: '/operate',
};

const BASE_URL = process.env.FES_APP_BASE_URL;
console.log('process.env', process.env);
console.log('BASE_URL', BASE_URL);
let getUrlPrefix = () => '';
const middleWare = (apiMap, method = 'post', withBizUrl) => {
    const API = {};
    Object.entries(apiMap).forEach(([fnName, url]) => {
        API[fnName] = (params, { bizUrl, urlPrefix, ...options } = {}) => {
            urlPrefix = urlPrefix || getUrlPrefix() || '';
            const fullUrl = urlPrefix + url;
            return request(withBizUrl && bizUrl ? `${fullUrl}/${isRef(bizUrl) ? bizUrl.value : bizUrl}` : fullUrl, params, {
                mergeRequest: true,
                method,
                ...options,
            }).catch((err) => {
                if (err?.data?.msg) FMessage.error(err?.data?.msg);
                return Promise.reject(err);
            });
        };
    });
    return API;
};
export const setUrlPrefix = (prefix) => {
    getUrlPrefix = () => prefix;
};

export const API = { ...middleWare(postApiMap), ...middleWare(postApiWithBizUrl, 'post', true), ...middleWare(getApiMap, 'get') };

const hooksMiddlerWare = (apiObj, settings) => {
    let outBizUrl;
    let urlPrefix = '';
    if (typeof settings === 'string') {
        outBizUrl = settings;
    } else {
        outBizUrl = settings?.bizUrl;
        urlPrefix = settings?.urlPrefix ?? urlPrefix;
    }
    const hooks = {};
    Object.entries(apiObj).forEach(([hookName, apiFn]) => {
        hooks[hookName] = (bizUrl = outBizUrl) => {
            const loading = ref(false);
            const requestFn = (params, options) => {
                loading.value = true;
                return apiFn(params, { bizUrl, ...options, urlPrefix })
                    .then((res) => {
                        loading.value = false;
                        return Promise.resolve(res);
                    })
                    .catch((err) => {
                        loading.value = false;
                        return Promise.reject(err);
                    });
            };
            return [loading, requestFn];
        };
    });
    return hooks;
};

export const ApiHooks = hooksMiddlerWare(API);
export const useApiHooks = (bizUrl) => hooksMiddlerWare(API, bizUrl);

页面使用

<script setup>
import { useApiHooks } from '@/services/api';

const ApiHooks = useApiHooks({ bizUrl, urlPrefix: route?.query?.mode === 'verify' ? '/check' : '' });
const [articleQueryLoading, articleQuery] = ApiHooks.articleQuery();
// 控制页面loading
        const loading = computed(() =>
            [
                articleQueryLoading,
                publishLoading,
                approvalCommitLoading,
                deleteLoading,
                withdrawLoading,
                offshelveLoading,
                fileDownloadLoading,
                unpublishLoading,
            ].some((i) => Boolean(i?.value)),
        );
</script>