如何使用Fetch发布x-ww-form-urlencoded请求？

Question

我有一些参数，我想POST格式编码到我的服务器：

{
    'userName': '[e-mail]',
    '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
  }); 

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

Answer 1

使用URLSearchParams

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

var data = new URLSearchParams();
data.append('userName', '[e-mail]');
data.append('password', 'Password');
data.append('grant_type', 'password');

Answer 2

更简单的是：

fetch('https://example.com/login', {
    method: 'POST',
    body: new URLSearchParams({
        'userName': '[e-mail]',
        'password': 'Password!',
        'grant_type': 'password'
    })
});

文件：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

Answer 3

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

var details = {
    'userName': '[e-mail]',
    '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
})

请注意，如果在（足够现代的）浏览器中使用fetch，而不是React Native，则可以创建URLSearchParams对象并将其用作主体，由于Fetch标准规定，如果主体是URLSearchParams对象，则应将其序列化为application/x-www-form-urlencoded。但是，不能在React-Native中执行此操作，因为React-Native未实现URLSearchParams。