Vue3项目的组件和axios请求太多，有什么工程化方法？

Question

正在编写的Vue3项目，有上百个请求和组件，请问该怎么合理组织啊？我现在都是在对应组件页面发起请求，杂乱无章。至于组件，则是文件夹下建文件夹，分模块存储。请教一些好方法。

Answer 1

回答：组件不那么大的话，你只需要把axios放在.vue文件里面即可，可以对axios的基本选项和配置进行抽离出来，形成一个utils.js，然后就只需要采用传递路径和data选项进来即可。对于单个.vue文件过大的情况，可以考虑对单个.vue文件进行拆分；

复杂的项目需要的是规范来统一，例如模块命名规则，文件夹命名规则，文件存放位置等；采用多层结构去对有关系的组件放在 更合适的位置

import axios from "axios";
import { ElMessage } from 'element-plus';

const apiURL = 'http://127.0.0.1:9001';

export function message(msg, type) {
    ElMessage({
        message: msg,
        showClose: true,
        type: type,
        center: true
    })
}

export const getRequest = (url, params) => {
    return axios({
        headers: {
            token: sessionStorage.getItem('token')
        },
        method: 'get',
        url: apiURL + url,
        params: params
    })
}

export const postRequest = (url, params) => {
    return axios({
        headers: {
            token: sessionStorage.getItem('token')
        },
        method: 'post',
        url: apiURL + url,
        data: params,
    })
}

export const postFileRequest = (url, params) => {
    return axios({
        headers: {
            token: sessionStorage.getItem('token')
        },
        method: 'post',
        url: 'http://127.0.0.1:10001' + url,
        data: params,
    })
}

export const putRequest = (url, params) => {
    return axios({
        headers: {
            token: sessionStorage.getItem('token')
        },
        method: 'put',
        url: apiURL + url,
        data: params,
    })
}

export const deleteRequest = (url, params) => {
    return axios({
        headers: {
            token: sessionStorage.getItem('token')
        },
        method: 'delete',
        url: apiURL + url,
        data: params,
    })
}