如何使用 Fetch API 在 Axios 中发布数据和参数

Posted 2023-02-27

【中文标题】如何使用 Fetch API 在 Axios 中发布数据和参数

【英文标题】：How do I POST data and parameters like in Axios, using Fetch API

【发布时间】：2019-01-26 20:09:27

【问题描述】：

以下面的 Axios 为例：

axios.post(this.reportURL, reportData, 
  params: 
    param1: paramValue1,
    param2: paramValue2
  ,
);

如何使用 fetch API 做同样的事情？我看到参数是这样完成的：

fetch(this.reportURL, 
  method: "POST",
  body: "param1=paramValue1&param2=paramValue2",
  headers: 
    
      "Content-Type": "application/x-www-form-urlencoded"
    

)

由于使用了 body 键来存储参数，我是否需要序列化整个 reportData 对象并将其连接到现有参数？

我不明白为什么 Fetch API 使用正文键作为参数。

此外，这不是我自己的 API，我无法更改预期的 POST 请求。

【问题讨论】：

除非我误读了 axios 文档，否则它们是不一样的。第一个，将这些参数附加为 URL 参数，即example.com?p1=foo&p2=bar。第二个会将正文附加为请求的实际正文，而不是 URL 的一部分。你尝试做什么。

您不能extract 从reportData 中获取您需要的部分并创建您自己的对象以传递给fetch？你是什​​么意思你不能改变 POST 请求？

@zero298 我正在尝试两者，因为 API 需要参数以及 JSON 数据。

@Akrion 我可以创建自己的对象，我想我想知道您的建议是否确实是正确的方法。

【参考方案1】：

如果您需要从哈希构造查询参数字符串并且在您的网站上使用 jQuery，您可以这样做：

var url = "http://www.abx.com?" + $.param(foo: "bar", baz: "kuuq") fetch(url)

这是 fetch 标准在其文档中推荐的内容（另请参阅 whatwg/fetch#56 中的讨论）：

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

这需要浏览器实现 url.searchParams。旧版浏览器可能需要 polyfill。

快速阅读此内容，但希望对您有所帮助

源：https://github.com/github/fetch/issues/256

【参考方案2】：

你可以 body: JSON.stringify( param1: paramValue1, param2: paramValue2 )

【讨论】：

但是数据不会被发送

【参考方案3】：

看起来你已经接近了，但在第二个例子中，当你发出一个 POST 请求时，参数通常会以 JSON 格式出现在请求的正文中：

fetch(this.reportURL, 
  method: "POST",
  body: JSON.stringify(
    param1: paramValue1,
    param2: paramValue2
  )    
)

【参考方案4】：

您可以将extract 来自reportData 的片段转换为另一个对象，并通过JSON.stringify 将其传递给fetch。

Fetch 也支持FormData，但这与我已经提到的对象方法没有太大区别。

作为per the docs，您可以将正文指定如下：

数组缓冲区 ArrayBufferView（Uint8Array 和朋友） Blob/文件 字符串 网址搜索参数 表单数据

【参考方案5】：

令人沮丧的是，fetch() 并没有真正提供一种“干净”的方式来提供查询字符串 URL 参数。您只需将它们放在您直接获取的 URL 中。这是一个争论点，您可以在 GitHub 上阅读：How to pass url query params? #256。

有几种方法可以模拟它：

const url = new URL("http://www.example.com");

const params = 
  foo: "bar",
  fizz: "buzz"
;

const data = 
  more: "data",
  that: "I",
  want: "to",
  send: "please"
;

Object.entries(params).forEach(([k, v]) => url.searchParams.append(k, v));
console.log(url);

fetch(url,  // URL as http://www.example.com/?foo=bar&fizz=buzz
  method: "POST",
  body: JSON.stringify(data) // The actual body
);

由于您的问题中也有application/x-www-form-urlencoded，您可能还想看看这个问题：Post a x-www-form-urlencoded request from React Native。

【讨论】：

感谢 github 的讨论，这很有帮助。 x-www-form-urlencoded 内容类型标头是无意的；我从另一个例子中粘贴了对混乱感到抱歉。当我将我们的应用程序从 Axios 转移到 fetch 时，我似乎需要克服很多障碍。