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

Question

将查询字符串参数传递给的正确方法是什么bs-fetch？

目前，我有：

Fetch.fetch("https://example.com/api?param1=value1&param2=value2")

显然，这对于较大的参数列表是不可持续的。

有一个更好的方法吗？

Answer 1

我认为没有内置的东西。只需制作您自己的查询构建器功能，就像这样

let payload = Js.Dict.empty();

Js.Dict.set(payload, "email", Js.Json.string("email@email.co"));

Js.Dict.set(payload, "password", Js.Json.string("secret"));

let query =
  Js.Dict.keys(payload)
  |> Array.fold_left(
       (query, key) =>
         switch (Js.Dict.get(payload, key)) {
         | Some(value) =>
           query ++ key ++ "=" ++ Js.Json.stringify(value) ++ "&"
         | _ => query
         },
       "?"
     );

这是游乐场的链接。

Answer 2

re:fetch支持查询参数

request("https://example.com/api",
  ~queryParams=[
    ("param1", "value1"),
    ("param2", "value2")
  ])
|> fetch;

或者

request("https://example.com/api")
|> Request.param("param1", "value1")
|> Request.param("param2", "value2")
|> fetch;

请注意，该库是实验性的。或者，您可以只滑动查询构建器代码，该代码已经过至少一点点的实战测试（@monssef 的实现中有一个微妙的错误，当有一个空列表时，它也没有进行正确的编码）：

[@bs.val] external encodeURIComponent : string => string = "";

let _buildUrl = (url, params) => {
  let encodeParam = ((key, value)) =>
    encodeURIComponent(key) ++ "=" ++ encodeURIComponent(value);

  let params =
      params |> List.map(encodeParam)
             |> String.joinWith("&");

  switch params {
  | "" => url
  | _ => {j|$url?$params|j}
  };
};