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

javascript jquery fetch-api http

2022-08-29 23:51:51

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

我提出这样的请求：GET

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

但是，我不确定如何向请求添加查询字符串。理想情况下，我希望能够向喜欢的人提出请求：GETGETURL

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

在我可以通过将作为的参数传递来执行此操作。有没有一种等效的方法来做到这一点？jQuery{order_id: 1}data$.ajax()Fetch API

答案 1

简明、现代的方法：

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();

如果您正在使用/支持...

即：Internet Explorer不提供对URLSearchParams或retch的本机支持，但有可用的polyfills 。
节点：从节点 18 开始，对 fetch API 有本机支持（在版本 17.5 中，它位于标志后面）。在旧版本中，您可以通过像node-fetch这样的包添加提取API。URLSearchParams随Node一起提供，并且可以从版本10开始作为全局对象找到。在旧版本中，您可以在上找到它。--experimental-fetchrequire('url').URLSearchParams
Node + TypeScript：如果你同时使用 Node 和 TypeScript，你会发现，由于一些技术限制，TypeScript 没有为全局 URLSearchParams 提供类型定义。最简单的解决方法是从模块中导入它。有关详细信息，请参阅此处。url

答案 2

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构造函数，您可以分配一个2D数组或对象，然后将其分配给，而不是循环所有键并附加它们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)

旁注：在 NodeJS 中也可用URLSearchParams

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