请问大家是怎么在大型vue项目里做接口管理的？

Question

大家好
我现在手上有一个toB的项目，大致结构是这样的

现在想要在前端做API的管理

一个设想是 按功能模块每一个模块一个文件夹

那么最后就会是这个效果,文件嵌套深
并且还有部分接口是各个模块都在使用（比如有的接口workplatform在用，manage1也在用）

另一个设想是和后端的路由 保持一致
我们的后端接口命名是和controller保持一致的
如 /auth/aaa /auth/bbbb

请问大家一般在前端做接口管理是习惯怎么做呢

补充一下

这里希望接口请求回来的数据能直接保存到vuex里
所以还是倾向于采用按功能模块分的方式

这是之前一个项目

不知道这种写法对于接口很多，或者功能模块嵌套层级比较深的时候
会不会有别的问题产生，请各位指教

Answer 1

大部分业务无非就是对一个实体的增删改查.建议按实体分,不管谁维护,实体肯定是要了解的.按实体分比较容易理解和查找.

具体做法如下.
一个js一个模块,维护对一个实体的所有操作.
而所有实体引入公用的request方法.
request内部封装请求库,通过参数控制loading,toast等等.

api
   request.js
   goods.js
   user.js

goods.js

import request from "./request";

export getGoods = (data) => request('/api/goods', {method: 'get', data}, {loading: true});

request.js

export function(url, config, option) {
    config = handleConfig(url, config);
    option = handleOption(option);
    return new Promise(resolve => {
        option.loading && loading();
        axios(config)
            .then(res => {
                if(option.success(res)) {
                    resolve({success: true, data: option.handleRes(res)});
                } else {
                    option.toast && toast(option.errorMessage);
                    resolve({success: false, data: option.hanldeRes(res)});
                }
            })
            .catch(res => {
                option.toast && toast(option.errorMessage);
                resolve({success: false, error: option.handleError(res)});
            })
    })
}

Answer 2

如果不用ts的话就把axios封装起来，接口按功能放几个文件，只存url和method就行了，参数什么的看文档就行了，因为参数会经常改，没必要，ts的话....