如何使用 Fetch POST 一个 x-www-form-urlencoded 请求？

javascript fetch-api http-post x-www-form-urlencoded

2022-08-30 00:40:21

我有一些参数，我想将表单编码发布到我的服务器：

{
    '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
  });

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

答案 1

您必须自己将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
})

请注意，如果您在（足够现代的）浏览器中使用，而不是React Native，则可以创建一个URLSearchParams对象并将其用作正文，因为Fetch Standard指出，如果它是一个对象，那么它应该被序列化为。但是，你不能在 React Native 中执行此操作，因为 React Native 不实现 URLSearchParams。fetchbodyURLSearchParamsapplication/x-www-form-urlencoded

答案 2

更简单：

fetch('https://example.com/login', {
    method: 'POST',
    headers:{
      'Content-Type': 'application/x-www-form-urlencoded'
    },    
    body: new URLSearchParams({
        'userName': 'test@gmail.com',
        'password': 'Password!',
        'grant_type': 'password'
    })
});

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