使用 encodeURIComponent 解决 GET 接口传递特殊字符报错使用 encodeURIComponent

使用 `encodeURIComponent` 解决 GET 接口传递特殊字符报错

在 Web 开发中，通过 HTTP GET 请求传递参数时，如果参数中包含特殊字符（如 %、&、$ 等），可能会导致请求失败或解析错误。使用 encodeURIComponent 方法可以有效解决这一问题。

什么是 `encodeURIComponent`？

encodeURIComponent 是 JavaScript 内置的一个函数，用于对 URI 组件进行编码。它会将某些字符转换为百分号编码形式（即 %XX），确保这些字符在 URL 中安全传输。

使用 `encodeURIComponent` 的步骤

获取参数值：获取需要传递的参数值。
对参数值进行编码：使用 encodeURIComponent 方法对参数值进行编码。
构建完整的 URL：将编码后的参数值附加到基础 URL 上，形成完整的请求 URL。
发送 GET 请求：使用 fetch 或其他 HTTP 客户端库（如 axios）发送 GET 请求。

示例代码

假设我们有一个 API 接口 /privacyNotice/getPolicyChannelList，需要传递一个包含特殊字符的参数 id。以下是使用 encodeURIComponent 的示例代码：

import request from 'your-request-library'; // 确保导入请求库
import { serveName } from 'path-to-your-constants'; // 确保 serveName 已定义

export const searchChannelSort = id => {
  const encodedId = encodeURIComponent(id || "");
  return request.get(`${serveName}/privacyNotice/getPolicyChannelList?name=${encodedId}`);
};

详细解释

导入依赖：
- request：假设这是一个已经导入的 HTTP 客户端库，例如 axios。
- serveName：假设这是你的基础 URL，从某个常量文件中导入。
获取参数值：
- id：需要传递的参数值。
对参数值进行编码：
- const encodedId = encodeURIComponent(id || "")：使用 encodeURIComponent 方法对 id 进行编码。如果 id 是 null 或 undefined，则使用空字符串 ""。
构建完整的 URL：
- ${serveName}/privacyNotice/getPolicyChannelList?name=${encodedId}：将编码后的 id 附加到基础 URL 上，形成完整的请求 URL。
发送 GET 请求：
- request.get(...)：使用 request 库发送 GET 请求。

具体示例

假设我们有以下参数值：

const id = "hello&world$test";

调用 searchChannelSort 方法：

searchChannelSort(id)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

生成的请求 URL 将是：

https://your-base-url/privacyNotice/getPolicyChannelList?name=hello%26world%24test

总结

通过使用 encodeURIComponent 方法，可以轻松解决 GET 请求中传递特殊字符时可能导致的请求失败或解析错误。这种方法确保了 URL 的正确性和安全性，提高了代码的健壮性和可靠性。

使用 encodeURIComponent 解决 GET 接口传递特殊字符报错