与jQuery ajax post方法相比，fetch方法没有按预期发布

Question

我很想使用新的fetch方法，我知道它可以用于对Rest端点的所有http方法调用。

所以我有以下非常简单的API端点，我知道它可以工作，获取和发布请求。我遇到的问题是获取post请求以处理fetch方法。

我的fetch方法代码是

        var ingredient = {
      'name': 'Salt',
    }; // a JSON object used as the body for the post request

    fetch('http://pantler-180711.nitrousapp.com/api/v1/Ingredients',
    {
      method: "POST",
      body: JSON.stringify( ingredient )
    })
    .then(function(res){ console.log( 'Data posted') })

  

然后我收到以下错误消息。 422（不可处理的实体）   

如果另一方面我做了一些非常相似的事情，但这一次使用经典的jQuery ajax post方法，它可以工作。

    $.ajax({
      url: 'http://pantler-180711.nitrousapp.com/api/v1/Ingredients',
      type: 'POST',
      data: 'name=Salt', // or $('#myform').serializeArray()
      success: function() { console.log('Data posted'); }
    });

这里的任何帮助都会受到赞赏，感觉我在这里缺少一些小东西，并且关于fetch方法的文档在网上很少。

Answer 1

这两个请求发送两个不同的帖子组，一个是application/x-www-form-urlencoded（jQuery），另一个是application/json。
您必须更改提取调用以发送与$ .ajax调用相同类型的数据 您可能必须在获取请求中明确设置内容类型。

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
var searchParams = new URLSearchParams();
searchParams.append("name", "Salt");
fetch('http://pantler-180711.nitrousapp.com/api/v1/Ingredients',
{
  method: "POST",
  headers: myHeaders,
  body: searchParams
})
.then(function(res){ console.log( 'Data posted') })