javascript - 将 jQuery.ajax post 重写为 fetch

Question

我有一个服务，它异步调用 REST API。我有一段 jQuery，它按预期工作，但我想使用 JS fetch 重写它。 。但是，它似乎没有将正确的数据发布到服务器。我从服务器得到的所有响应都是“缺少参数:userId”。

下面是我的工作 jQuery:

$.ajax({
  url: 'http:/myservice.com/users/delete',
  data: { userId: myVar },
  type:'post',
  success: function(response) {
    console.log(response);
  }
});

我假设代码很简单:

fetch('http:/myservice.com/users/delete', {
  method: 'post',
  body: { userId: myVar }
}).then(function(response) {
   return response.text()
});

如果我查看原始代码中的 XHR 请求，它实际上会发布表单数据。所以我尝试重写:

fetch('http:/myservice.com/users/delete', {
  method: 'post',
  body: new FormData({ userId: myVar })
}).then(function(response) {
   return response.text()
});

我还尝试了代码的其他变体，例如将其作为硬编码字符串 (userId=1337) 发送或使用 JSON.stringify。

我做错了什么？我对 fetch 的理解不正确吗？我还能做些什么来调试吗？

Answer 1

构建 body 确实需要一些修补。

尝试下面的代码:

var serialize = function (data) {
    return Object.keys(data).map(function (keyName) {
        return encodeURIComponent(keyName) + '=' + encodeURIComponent(data[keyName])
    }).join('&');
};

fetch('http:/myservice.com/users/delete', {
  method: 'post',
  body: serialize({ userId: myVar })
}).then(function(response) {
   return response.text()
});