ES6代理和反射实现代理方法代理

    个人网站：https://aijianli.site/ 可以免费在线制作简历，提供PDF下载，方便快捷。

    vqa (view query api) 是一个后端查询组件,方便写 sql 查询，能减少在后端代码中增加业务代码。前端调用接口的方式比较复杂。因此使用ES6的反射和代理对调用方式进行改造，实现方便调用。

一、原始的vqa接口调用方式

function findStatsTable() {
   
    let params = {
   
        method: "stats-service-stats-table.findTable",
        datas: {
   
            st_id: "1234567890",
        }
    };
    this.axios.post("/stats/vqa-query", params).then(res => {
   
        console.log(res)
    })
}

存在的问题：

• 参数params太复杂，并且同一个模块有很多vqa，它们的 params.method 中的前缀（stats-service-stats-table）是相同的，只有方法名不同，每次查询都要复制相同的内容，后期如有改变很难维护
• 同一个服务的接口地址（/stats/vqa-query）相同，每次都要写相同的字符串，太多重复。

二、改进的vqa调用方式

function findStatsTable() {
   
    let params = {
   
         st_id: "1234567890",
    };
    this.$statsTable.findTable(params).then(res => {
   
        console.log(res)
    })
}

改进后的优点：

• 调用简单，只需要关注请求参数、
• 易维护，不会重复在不同的地方出现stats-service-stats-table，/stats/vqa-query等字符串

三、实现代码

3.1 类图结构设计

3.2 具体实现

其中，ParentInterface中的 _sendVqaRequest 方法内容如下，这里就是封装的原始的vqa的方法

class ParentInterface {
   
    /*......*/

    /**
     * 项vqa接口发送请求, 注意vqa的请求都是 post 请求
     * @param {Object} params 对应查询的 method 的 datas 中需要的参数
     * @param {String} method 查询的 vqa 方法，不需要方法前缀，只需要方法名
     * @returns 
     */
    _sendVqaRequest(params, method) {
   
        params = this._getParams(params, method);
        return this[axiosSym].post(this[vqaUrlSym], params).then(res => {
   
            return res.data.content;
        })
    }
     /*......*/
}

为了实现调用类中不存在的方法时都统一调用 _sendVqaRequest 方法，需要使用到ES6的反射和代理，这才是实现此功能的关键。具体实现如下：

	/**
 * 初始化所有接口
 * @param {*} app Vue
 * @par