Javascript 如何使用 Fetch 发布 xwwwformurlencoded 请求

发布于06月01日

我有一些参数要发布到我的服务器上:

{
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
}

我发送的请求(目前没有参数)如下

var obj = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
};
fetch('https://example.com/login', obj)
  .then(function(res) {
    // Do stuff with result
  });

如何在请求中包含表单编码参数？

推荐答案

您必须自己组装x-www-form-urlencoded负载，如下所示:

var details = {
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body: formBody
})

请注意，if您在(足够现代的)浏览器中使用fetch，而不是Reaction Native，您可以创建一个URLSearchParams对象并将其用作正文，因为Fetch Standard states要求如果body是URLSearchParams对象，则应该将其序列化为application/x-www-form-urlencoded.但是，您不能在Reaction Native中执行此操作，因为Reaction Native does not implement URLSearchParams.