如何使用 Fetch API POST 数据和参数，例如在 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 使用 body 键作为参数。

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

Answer 1

fetch()令人沮丧的是，并没有真正提供一种“干净”的方式来提供查询字符串 URL 参数。您只需将它们放在您直接获取的 URL 中。这是一个争论点，您可以在 GitHub 上阅读：如何传递 url 查询参数？＃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。