关于javascript:一个不兼容的-JS-方法让你的网站发生崩溃

在开发前台零碎的过程中，遇到了一个很奇怪的问题：PC 端的申请都很失常，挪动端浏览器的申请却全副失败，起初发现这是因为申请参数产生了失落景象。

本文将围绕 URL 查问字符串的序列化办法 URLSearchParams 开展内容，最终得出的论断是：在做兼容多端网站开发时，须要审慎应用 URLSearchParams 办法。

问题出现

采纳的是前后端拆散模式，须要在前端页面中对申请参数进行拼接，而后会向后端接口发出请求从而获取数据。

在 PC 端后果很失常，在挪动端浏览器中尝试，产生了如下报错，导致网站在挪动端产生性能的全面解体：

剖析问题

查看 Ngin 申请日志，发现很多上面的报错：

[19/Jan/2021:11:44:58 +0800] "GET /api/method?a%2C123= HTTP/2.0" 403 ……

通过对 JS 中相干逻辑的排查，定位到，最后的办法如下：

obj2String: (obj) => {
    let arr = [], index = 0;
    for (let key in obj) {
        arr[index++] = [key, obj[key]];
    }
    return new URLSearchParams(arr).toString();
}

解决问题

通过查看 URLSearchParams 应用阐明文档，发现它在浏览器兼容性方面存在一些有余，如图所示：

通过屡次调试，对 URL 查问字符串的拼接进行了优化解决，最终的办法如下：

obj2String: (obj) => {
    let str = '';
    for (let key in obj) {
        if(str != '') str += '&';
        str += key + "=" + obj[key];
    }
    return str;
}

此时，PC 端和挪动端浏览器中恢复正常，网站也兼容了多端的拜访。

拓展常识

querystring（查问字符串）：NodeJS 自带模块，用于解析和格式化 URL 查问字符串。

参考链接

① URLSearchParams() – Web API 接口参考 | MDN

② URL | Node.js v15.6.0 Documentation