Vue工程中的重构数据服务

Question

在一个正在进行的Vue项目中，负责与API通信的文件已经被分组到一个“服务”部分。虽然下面所示的代码可以很好地按照所写的方式工作，但由于以下这些因素，简化它似乎是有益的：

1. 还需要几个特定于API的文件来支持项目。
2. 下面所示的2个示例API特定文件中的代码本质上是相同的，但resource const中的值除外。

src/services/service.js

import axios from 'axios';

export default axios.create({
    baseURL: 'advancedplanningextension/api/'
})

API特定文件-

src/services/official-scenarios-service.js

import service from './service';

const resource = 'scenariolog';

export default {
    get() {
        return service.get(`${resource}`);
    }
}

src/services/parameters-service.js

import service from './service';

const resource = 'parameter';

export default {
    get() {
        return service.get(`${resource}`);
    }
}

文件以选择正确的API特定文件-

src/services/service-factory.js

import OfficialScenariosService from './official-scenarios-service';
import ParametersService from './parameters-service';

const services = {
    officialScenarios: OfficialScenariosService,
    parameters: ParametersService
    // add more here
}

export const ServiceFactory = {
    get: name => services[name]
}

插件文件-

src/plugins/service.js

import { ServiceFactory } from '../services/service-factory';

export default {
    install: function(Vue) {
        Object.defineProperty(Vue.prototype, '$service', { value: ServiceFactory });
    }
}

在src/main.js中显示插件文件连接的相关代码-

import ServicePlugin from './plugins/service';
Vue.use(ServicePlugin);

src/views/official-scenarios.vue中的示例用法-

<template>
    {{ officialScenarios }}
</template>

<script>
export default {
    data() {
        return {
                officialScenarios: []                
        }
    },
    methods: {
        async getOfficialScenarios() {
            const { data } = await this.$service.get('officialScenarios').get();            
            this.officialScenarios = data;
        }
    },
    mounted: function () {
        this.getOfficialScenarios(); 
    }
}
</script>

我尝试创建一个src/services/generic-service.js文件(以替换特定于2API的文件)，目的是从src/services/service-factory.js调用该文件，但很快我意识到，在以这种方式调用resource时，我不知道如何填充它。

src/services/generic-service.js -

import service from './service';

let resource = '';  // don't know how to populate this from caller service-factory.js to access the correct API

export default {
    get() {
        return service.get(`${resource}`);
    }
}

当service-factory.js调用generic-service.js文件时，是否有一种方法来设置resource变量？或者有一种方法可以将generic-service.js中的逻辑直接集成到service-factory.js...？中或者有比这些选择更简单的方法.？

OUTCOME非常感谢@Estus烧瓶提供的答案和后续信息。现在，我决定将所有服务逻辑放入src/ services /index.js中。如果项目不再需要createService，那么我将在那时处理重构。下面的代码看起来很有效-

src/services/index.js -

import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: 'advancedplanningextension/api/'
});

const createService = resource => ({
    get() {
        return axiosInstance.get(`${resource}`);
    }
    // add more here
});

const resources = {
    officialScenarios: 'scenariolog',
    parameters: 'parameter'
    // add more here
}

export const service = {
    get: name => createService(resources[name])
}

resources中的值是特定的API端点。因此，例如，当代码为officialScenarios调用服务时，该API端点的URL将是“advancedplanningextension/api/scenariolog”。

src/plugins/service.js -

import { service } from '../services/index';

export default {
    install: function(Vue) {
        Object.defineProperty(Vue.prototype, '$service', { value: service });
    }
}

示例用法在src/视图/官方场景中保持不变，如原来的问题中所示。

Answer 1

这可以通过工厂功能来解决：

base-service.js

import axios from 'axios';

export const axiosInstance = axios.create({
    baseURL: 'advancedplanningextension/api/'
});

export const createService = resource => ({
    get() {
        return axiosInstance.get(`${resource}`);
    },
    // etc.
});

foo-service.js

import { createService } from './base-service';

export default createService('foo');

service-factory名称具有误导性，因为它实际上不是一个工厂，只是一个包装模块。同样的事情可以作为桶模 (通常是索引模块)更有效地重写：

服务/index.js

export { default as foo } from './foo-service';
export { default as bar } from './foo-service';

然后，它将获得ES模块的所有好处，例如树的抖动，并可用于：

import * as services from './services';

services.foo.get(...);