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

Question

以下面的 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 请求。

Answer 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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

1. 数组缓冲区
2. ArrayBufferView（Uint8Array 和朋友）
3. Blob/文件
4. 字符串
5. 网址搜索参数
6. 表单数据

Answer 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。