Fetch-Methode nicht wie erwartet, im Vergleich zu jQuery Ajax Post-Methode

Question

Ich bin bestrebt, die neue Fetch-Methode zu verwenden, und ich verstehe, dass es für alle HTTP-Methode Aufrufe an einen Rest-Endpunkt verwendet werden kann.

So habe ich den folgenden sehr einfachen API-Endpunkt, den ich weiß funktioniert, bekommen und Post-Anforderungen arbeiten. Das Problem, das ich habe, ist, dass die Post-Anforderung mit der Fetch-Methode arbeitet.

Mein Code für die Methode holen ist

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

ich die folgende Fehlermeldung dann erhalten. 422 (Unprocessable Entity)

Wenn auf der anderen Seite habe ich etwas sehr ähnlich, aber dieses Mal tun, um die klassische jQuery Ajax-Post-Methode funktioniert.

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

Alle hier Hilfe würde geschätzt, es fühlt sich an wie ich hier kleine etwas fehlt bin, und Dokumentationsmethode ist im Web kaum holen auf.

Answer 1

Die zwei Anfrage sendet zwei verschiedene Post-Körper ist application/x-www-form-urlencoded (jQuery) und der andere ist application/json.
Sie müssen den Abrufaufruf ändern, um denselben Datentyp wie den $ .ajax-Aufruf zu senden.
Möglicherweise müssen Sie den Inhaltstyp explizit in der Abrufanforderung festlegen.

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