Fetch GET 请求中添加查询字符串

在探索 Fetch API 的查询字符串功能时，开发人员的目标是使用类似于 jQuery 的 $ 的方法将参数传递给 GET 请求.ajax().

解决方案

新的 Fetch API 使用 URLSearchParams 来解决查询字符串添加。该对象提供了一种构建和修改查询字符串参数的便捷方法。

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

URLSearchParams.toString() 方法将参数对象编码为适当格式的查询字符串。

或者，您可以省略 .toString() 调用，如下所示当与字符串连接时，JavaScript 会自动将非字符串对象强制转换为字符串。请注意，这种方法需要对 JavaScript 有更深入的了解。

完整示例

这是一个带有查询参数的综合示例：

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