vue项目如何优雅高效地进行http请求

Question

1,描述：目前采用的是vue+vuex+axios。
目前做法是：首先封装一个axios的fetch()方法（截图不完整，下面的拦截器什么的就不截图了）：
封装的fetch.js:

然后把所有的api都统一在一个文件内，接口没有很多，几乎都是简单的curd操作，再然后把每一个接口导出一个方法，代码：
包含所有API的api.js

再写一个action去 调用：
vuex:

最后在页面需要的地方，去dispatch这个action：
页面：

2,
疑惑1，上面这个流程是否有流程上、代码上不妥或者错误的的地方（任何一处）？是否有更优雅更简便高效的改进方法？
疑惑2，vue官方推荐的是axios，但是目前公司用的是fetch，所以请教一下是否有必要换成fetch？
疑惑2，action返回的是一个promise，是否有必要这样做？是否可以直接这样：

这样做之后在dispatch之后进行then和catch吗？
最后，谢谢各位。以上问题可以给个链接我自己去看，谢谢。

Answer 1

我们有些项目这样子做

const ApiMap = [
    'login',
    'logout',

    'account',
    'account_create',
    'account_list',
    'account_update',
    'account_remove',

    'task',
    'task_create',
    'task_list',
    'task_update',
    'task_remove',
    'task_exception',
    'task_record_list'
]

const Api = {}

ApiMap.forEach(apiPath => {
    Api[apiName] = async function (params) {
        var result = await request(`${config.baseUrl}/${apiPath}`, params);
        console.groupCollapsed(`${config.baseUrl}/${apiPath}`)
        console.info(params);
        console.info(result);
        console.groupEnd()
        if (!result.success && result.error) {
            PopMsg(result.error);
            if (/请登录/.test(result.error)) {
               //...
            }
            throw result.error;
        }
        return result;
    }
})

export default Api;