如何使用bs-fetch传递查询字符串参数？

嘿，直接拼接查询字符串确实在参数多的时候既麻烦又容易出错（比如忘记转义特殊字符），其实bs-fetch可以配合浏览器原生的URLSearchParams来优雅解决这个问题，这是更规范、易维护的方案。

方法一：用URLSearchParams构建参数 #

你可以先把参数整理成键值对列表，再转换成URLSearchParams，最后拼接到基础URL上：

// 定义所有查询参数
let paramList = [
  ("param1", "value1"),
  ("param2", "value2"),
  ("param3", "包含&特殊=字符的值"), // 特殊字符会自动被转义
];

// 从键值对创建URLSearchParams实例
let searchParams = new%js URLSearchParams(Js.Dict.fromList(paramList));

// 拼接成完整URL
let fullUrl = "https://example.com/api" ++ "?" ++ searchParams->URLSearchParams.toString;

// 调用fetch
Fetch.fetch(fullUrl)

方法二：用URL对象直接构建（更推荐） #

这种方式更直观，你可以直接操作URL实例的searchParams属性来添加/修改参数：

// 创建URL实例
let apiUrl = new%js URL("https://example.com/api");

// 逐个添加参数
apiUrl->URL.searchParams->URLSearchParams.set("param1", "value1");
apiUrl->URL.searchParams->URLSearchParams.set("param2", "value2");
// 支持动态添加可选参数
Option.iter(
  paramValue => apiUrl->URL.searchParams->URLSearchParams.set("optionalParam", paramValue),
  maybeOptionalParam // 假设这是一个Option.t<string>类型的可选参数
);

// 转换为字符串后调用fetch
Fetch.fetch(apiUrl->URL.toString)

为什么这两种方法更好？ #

• 自动编码：URLSearchParams会自动处理特殊字符（比如&、=、空格等）的转义，避免手动拼接时出现的编码错误。
• 易维护：添加、删除或修改参数只需要操作对应的键值对，不用去冗长的字符串里找位置修改。
• 类型安全：配合ReasonML的类型系统，你可以更方便地约束参数的类型，减少错误。

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