JavaScript Web Data Connector可选URL参数失效及代码优化问询

核心问题分析 #

1. URL解析异常原因：原代码条件判断顺序错误，当两个日期都为空时，会优先触发start-date为空的分支，导致请求参数中包含空值的endDate字段，后端无法识别该空参数引发错误；同时部分分支错误添加了未提及的type字段，进一步干扰请求逻辑。
2. 重复逻辑问题：多个分支重复执行tableau.connectionData赋值、tableau.submit()等操作，代码冗余度高。

解决方案 #

1. 重构参数收集逻辑 #

先初始化必填字段，再仅将非空的可选字段加入参数对象，避免传递空值参数。

2. 简化条件判断 #

移除冗余的多分支判断，统一处理参数收集与提交流程。

修改后的完整代码 #

(function() {
    // 创建连接器对象
    var myConnector = tableau.makeConnector();

    // 定义数据 schema
    myConnector.getSchema = function(schemaCallback) {
        var cols = [{
            id: "symbol",
            alias: "symbol",
            dataType: tableau.dataTypeEnum.string
        }, {
            id: "date",
            alias: "date",
            dataType: tableau.dataTypeEnum.date
        }];
        var tableSchema = {
            id: "My data",
            alias:"My daily data ",
            columns: cols
        };
        schemaCallback([tableSchema]);
    };

    // 下载数据
    myConnector.getData = function(table, doneCallback) {
        var dataObj = JSON.parse(tableau.connectionData);
        const searchParams = new URLSearchParams(dataObj);
        const apiCall = `https://mywebsite/getMyData.json?${searchParams}`; 
        $.getJSON(apiCall, function(resp) {
            var tableData = resp.results.map(feat => ({
                "symbol": feat.symbol,
                "date": feat.date
            }));
            table.appendRows(tableData);
            doneCallback();
        }).fail(function() {
            // 增加错误处理，便于排查请求问题
            tableau.abortWithError("数据请求失败，请检查参数或网络连接");
        });
    };

    tableau.registerConnector(myConnector);

    // 表单提交事件监听
    $(document).ready(function() {
        $("#submitButton").click(function() {
            const symbol = $('#symbol').val().trim();
            const apikey = $('#apikey').val().trim();
            const startDate = $('#start-date').val().trim();
            const endDate = $('#end-date').val().trim();

            // 校验必填字段
            if (!symbol || !apikey) {
                $('#errorMsg').show().html("Symbol 和 API Key 不能为空");
                return;
            }

            // 构建参数对象：仅添加非空的可选字段
            const dataObj = { apikey, symbol };
            if (startDate) dataObj.startDate = startDate;
            if (endDate) dataObj.endDate = endDate;

            // 提交请求
            tableau.connectionData = JSON.stringify(dataObj);
            tableau.connectionName = "My Data";
            tableau.submit();
        });
    });
})();

关键优化点 #

• 参数收集优化：通过条件判断仅将非空的可选字段加入dataObj，避免传递空值参数，解决URL解析异常问题。
• 逻辑简化：移除冗余的多分支判断，统一处理参数校验、构建与提交流程，代码更简洁易维护。
• 错误处理增强：为$.getJSON添加fail回调，便于排查请求失败问题。
• 循环简化：用Array.map替代传统for循环，简化数据转换逻辑。

内容的提问来源于stack exchange，提问作者GeekyPanda