使用 Fetch GET 请求设置查询字符串

Question

我正在尝试使用新的 Fetch API ：

我正在发出这样的 GET 请求：

var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
fetch(request);

但是，我不确定如何向 GET 请求添加查询字符串。理想情况下，我希望能够向如下 GET 发出 URL 请求：

'http://myapi.com/orders?order_id=1'

在 jQuery 中，我可以通过传递 {order_id: 1} 作为 data 的 $.ajax() 参数来做到这一点。使用新的 Fetch API 是否有等效的方法？

原文由 mylescc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2017 年 3 月更新：

URL.searchParams 支持已正式登陆 Chrome 51，但其他浏览器仍然需要 polyfill 。

---

使用查询参数的 官方 方法是将它们添加到 URL 中。从 规范，这是一个例子：

 var url = new URL("https://geo.example.org/api"),
 params = {lat:35.696233, long:139.570431}
 Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
 fetch(url).then(/* … */)

但是，我不确定 Chrome 是否支持 URL 的 searchParams 属性（在撰写本文时），因此您可能想要使用 第三方库 或 自己的解决方案。

2018 年 4 月更新：

通过使用 URLSearchParams 构造函数，您可以分配一个二维数组或一个对象，然后将其分配给 url.search 而不是遍历所有键并附加它们

var url = new URL('https://sl.se')

 var params = {lat:35.696233, long:139.570431} // or:
 var params = [['lat', '35.696233'], ['long', '139.570431']]

 url.search = new URLSearchParams(params).toString();

 fetch(url)

旁注： URLSearchParams 在 NodeJS 中也可用

const { URL, URLSearchParams } = require('url');

原文由 CodingIntrigue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一种简洁、现代的方法：

 fetch('https://example.com?' + new URLSearchParams({
    foo: 'value',
    bar: 2,
}))

工作原理： 当字符串（例如 URL）与 URLSearchParams 的实例连接时，将自动调用 其 toString() 方法以将实例转换为字符串表示形式，这恰好是正确编码的查询字符串。如果自动调用 toString() 对你来说太神奇了，你可能更愿意像这样明确地调用它： fetch('https://...' + new URLSearchParams(...).toString())

带有查询参数的获取请求的完整示例：

 // Real example you can copy-paste and play with.
// jsonplaceholder.typicode.com provides a dummy rest-api
// for this sort of purpose.
async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: ' + url);
  console.log(result);
}

doAsyncTask();

---

如果您正在使用/支持…

• IE： Internet Explorer 不提供对 URLSearchParams 或 fetch 的原生支持，但有 可用 的 polyfill 。

• 节点： 从节点 18 开始，有对获取 API 的原生支持（在版本 17.5 中，它位于 --experimental-fetch 标志后面）。在旧版本中，您可以通过像 node-fetch 这样的包添加 fetch API。 URLSearchParams 与 Node 一起提供，从版本 10 开始可以作为全局对象找到。在旧版本中，您可以在 require('url').URLSearchParams 找到它。

• Node + TypeScript： 如果您同时使用 Node 和 TypeScript，您会发现，由于某些技术限制，TypeScript 不提供全局 URLSearchParams 的类型定义。最简单的解决方法是从 url 模块导入它。有关更多信息，请参见 此处。

原文由 Scotty Jamison 发布，翻译遵循 CC BY-SA 4.0 许可协议