axios GET请求动态拼接参数出现多余分号报错如何解决？

问题根源 #

你代码里的分号是非法的URL拼接格式被自动转义处理生成的，核心有3个错误：

• 查询参数拼接逻辑完全错误：HTTP查询参数仅第一个参数前用?，后续所有参数之间用&分隔，你的代码遍历每个参数都加了?，生成的URL格式不符合规范，axios或服务端解析非法URL时会自动插入分号做转义标记，就是报错里分号的来源。
• 错误使用for...in遍历数组：for...in遍历返回的是数组索引，你的判断条件element !== ''永远成立，所有参数都会被加上前缀?，进一步加重URL格式错误。
• 未做URL特殊字符编码：参数里的空格、单引号等特殊字符没有编码，容易触发解析异常。

最优修复方案 #

完全不需要手动拼接查询参数，直接使用axios自带的params配置项，axios会自动完成参数序列化、特殊字符编码、分隔符拼接，不会出现格式错误：

const api = axios.create({
    baseURL: 'https://exoplanetarchive.ipac.caltech.edu/cgi-bin/nstedAPI/nph-nstedAPI'
});

export const getExoplanets = async () => {
    try {
        return await api.get('', {
            params: {
                table: 'cumulative',
                where: "koi_disposition like 'CANDIDATE' and koi_period>300 and koi_prad<2",
                order: 'koi_period',
                format: 'json'
            }
        });
    } catch (error) {
        return error;
    }
};

如果你要保留手动拼接的写法，修正拼接逻辑即可： #

const parameters = [
    'table=cumulative',
    'where=koi_disposition like \'CANDIDATE\' and koi_period>300 and koi_prad<2',
    'order=koi_period',
    'format=json'
];
// 所有参数用&拼接后，前面加统一的前缀?
const searchParameters = '?' + parameters.join('&');

const api = axios.create({
    baseURL: 'https://exoplanetarchive.ipac.caltech.edu/cgi-bin/nstedAPI/nph-nstedAPI'
});

export const getExoplanets = async () => {
    try {
        return await api.get(searchParameters);
    } catch (error) {
        return error;
    }
};

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