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

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

回答：组件不那么大的话，你只需要把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,
    })
}

没有好的办法吧 。本来 axios 就已经封装过了 ，很方便使用了。接口多 自然 要写的 axios 就多了

封装axios.js,执行一些公共的操作，如传tooken，错误提示类的

import axios from 'axios'
import { Toast } from 'vant'
import { setLocal } from '@/common/js/utils'
import router from '../router'

axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '//backend-api-01.newbee.ltd/api/v1' : '//backend-api-01.newbee.ltd/api/v1'
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
axios.defaults.headers.post['Content-Type'] = 'application/json'

axios.interceptors.response.use(res => {
  if (typeof res.data !== 'object') {
    Toast.fail('服务端异常！')
    return Promise.reject(res)
  }
  if (res.data.resultCode != 200) {
    if (res.data.message) Toast.fail(res.data.message)
    if (res.data.resultCode == 416) {
      router.push({ path: '/login' })
    }
    if (res.data.data && window.location.hash == '#/login') {
      setLocal('token', res.data.data)
      axios.defaults.headers['token'] = res.data.data
    }
    return Promise.reject(res.data)
  }

  return res.data
})

export default axios

写公共的请求js文件，如address.js

import axios from '../utils/axios'

export function addAddress(params) {
  return axios.post('/address', params);
}

export function EditAddress(params) {
  return axios.put('/address', params);
}

export function DeleteAddress(id) {
  return axios.delete(`/address/${id}`);
}

export function getDefaultAddress() {
  return axios.get('/address/default');
}

export function getAddressList() {
  return axios.get('/address', { pageNumber: 1, pageSize: 1000 })
}

export function getAddressDetail(id) {
  return axios.get(`/address/${id}`)
}

页面引入

import { addAddress, EditAddress, DeleteAddress, getAddressDetail } from '@/service/address'

//使用
await state.type == 'add' ? addAddress(params) : EditAddress(params)
      Toast('保存成功')


const onDelete = async () => {
      await DeleteAddress(state.addressId)
      Toast('删除成功')
      setTimeout(() => {
        router.back()
      }, 1000)
    }

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：vue3项目中封装axios