如何向 javascript 的 fetch() 函数发送附加数据

Posted 2023-03-02

【中文标题】如何向 javascript 的 fetch() 函数发送附加数据

【英文标题】：How do I sent additional data to javascript's fetch() function

【发布时间】：2017-07-08 21:14:03

【问题描述】：

我想使用fetch() 来查询为我的搜索页面提供支持的 API 端点。它返回 JSON 格式的搜索结果列表。

我还想将用户提交的当前查询传递给 API。旧实现使用 jquery 和 getJSON。查看 getJSON 的文档，它说我可以传入 data 变量：

数据 类型：PlainObject 或 String 与请求一起发送到服务器的普通对象或字符串。

Looking at the docs 用于获取，我不确定如何在请求中传递数据。所以我的问题是，我如何传递一个将与我的请求一起发送到服务器的字符串？

编辑：我想我可以将查询附加到请求 URL，例如“/search/?q=Something”并发送。有没有人有更好的方法？

【问题讨论】：

是不是 fetch 只是构建来获取固定信息？在文档中，我找不到任何可以使用 fetch 发送参数的内容。有 getpost getJSON ajax 和更多参数

如果您不希望数据出现在请求中怎么办 - 只希望在响应结果时让变量存在？

【参考方案1】：

如果您查看有关 fetch 的文档的 Body section，它列出了几种类型的值，您可以使用它们来指定在请求中发送的数据。

使用FormData的示例：

var fd = new FormData();
fd.append('q', 'Something');

fetch('/search', 
  method : "POST",
  body : fd
)
.then(...)

请注意，您不能在 GET 或 HEAD 请求上使用 body 选项（您的情况似乎可能正在这样做）。在这种情况下，您可以使用URLSearchParams 构建参数：

var params = new URLSearchParams();
params.append('q', 'Something');

fetch('/search/?' + params.toString(), 
    method: 'GET'
)
.then(...);

【讨论】：

普通 javascript 对象似乎未在 body github.com/w3c/web-platform-tests/blob/master/fetch/api/request/…、github.com/w3c/web-platform-tests/blob/master/fetch/api/basic/… 测试或预期

@guest271314 如果我在我的 Chrome 控制台中调用 fetch('/save', method : "POST", body : data : 5 )，请求会以空正文和 Content-Length 0 发送。

是的，javascript 对象应该传递给JSON.stringify()，另见***.com/questions/40939857/fetch-with-readablestream

【参考方案2】：

你可以通过如下方式

 fetch('/users', 
  method: 'POST',
  headers: 
    'Content-Type': 'application/json'
  ,
  body: JSON.stringify(
    name: 'Hubot',
    login: 'hubot',
  )
)