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"
    }

})

由于正文密钥用于存储参数，我是否需要序列化整个reportData对象并将其连接到现有参数？

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

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

Answer 1

令人沮丧的是，fetch()并没有真正提供“干净”的方式来提供查询字符串URL参数。您只需要将它们放在直接获取的URL中即可。您可以在GitHub上{@ 3}上了解这一点。

有几种方法可以模拟它：

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，因此您可能还想看看这个问题：How to pass url query params? #256。

Answer 2

如果您需要根据哈希值构造查询参数字符串，并且在网站上使用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。

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

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

Answer 3

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

Answer 4

看起来已经接近了，但是在第二个示例中，在发出POST请求时，参数通常以JSON的形式出现在请求的正文中：

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

Answer 5

您可以extract reportData中的片段到另一个对象中，并通过JSON将其传递给fetch。

Fetch还支持FormData，但这与我已经提到的对象方法没什么不同。

作为per the docs，您可以指定 body 如下：

ArrayBuffer
ArrayBufferView（Uint8Array和朋友）
blob /文件
字符串
URLSearchParams
FormData

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

5 个答案: