如何配置Redux Toolkit RTK Query参数为ASCII格式，使空格转为%20？

我需要将包含多个单词的字符串作为参数传递给API端点，当前生成的查询是api/pages/search?name=firstWord+secondWord，但实际需求是api/pages/search?name=firstWord%20secondWord，相关代码如下：

query: (search: string) => {
        // variable search can be multiple words
        return {
          url: `pages/search`,
          params: {
            name: search,
          },

解决方法 #

方法1：手动编码参数值

直接使用encodeURIComponent()对参数值进行编码，它会将空格转换为%20：

query: (search: string) => {
        return {
          url: `pages/search`,
          params: {
            name: encodeURIComponent(search),
          },

注意：如果你的HTTP库（如axios）会自动对params进行编码，这种方式可能导致双重编码（%20被转成%2520），此时建议用方法2。

方法2：自定义参数序列化规则

配置HTTP库的参数序列化函数，统一使用encodeURIComponent处理键值对，确保空格被转成%20。以axios为例：

query: (search: string) => {
        return {
          url: `pages/search`,
          params: {
            name: search,
          },
          paramsSerializer: (params) => {
            return Object.keys(params)
              .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
              .join('&');
          }
        };

原理说明 #

默认的application/x-www-form-urlencoded格式会将空格转换为+，而encodeURIComponent遵循URI标准，会将空格转换为%20。如果API要求必须使用%20作为空格的编码形式，就需要采用上述方式覆盖默认的编码规则。

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