Ma püüan POSTIDA JSON-objekti, kasutades fetch.
Nagu ma aru saan, pean ma taotluse kehale lisama stringitud objekti, nt:
fetch("/echo/json/",
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: "POST",
body: JSON.stringify({a: 1, b: 2})
})
.then(function(res){ console.log(res) })
.catch(function(res){ console.log(res) })
Kui kasutan [jsfiddle's json echo][2], siis ootan, et näen tagasi objekti, mille olen saatnud ({a: 1, b: 2}
), kuid seda ei juhtu - chrome devtools ei näita isegi JSON-i kui taotluse osa, mis tähendab, et seda ei saadeta.
Koos ES2017 async/await
toega on see, kuidas POST
ida JSON-saatelehte:
(async () => {
const rawResponse = await fetch('https://httpbin.org/post', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({a: 1, b: 'Textual content'})
});
const content = await rawResponse.json();
console.log(content);
})();
Ei saa't kasutada ES2017? Vaata @vp_art's vastus kasutades lubadusi
Küsimus aga küsib probleemi, mille põhjuseks on a long since fixed chrome bug. Algne vastus järgneb.
chrome devtools ei'isegi ei näita JSONi kui osa taotlusest
See on siin tegelik probleem ja see'on chrome devtools'i viga, mis on parandatud Chrome 46-s.
See kood töötab hästi - see POSTib JSONi õigesti, seda lihtsalt ei ole näha.
Ma'ootan, et näeksin objekti, mille ma'olen saatnud tagasi
mis'ei tööta, sest see ei ole JSfiddle's echo õige formaat.
[õige kood][5] on:
var payload = {
a: 1,
b: 2
};
var data = new FormData();
data.append( "json", JSON.stringify( payload ) );
fetch("/echo/json/",
{
method: "POST",
body: data
})
.then(function(res){ return res.json(); })
.then(function(data){ alert( JSON.stringify( data ) ) })
JSON-nõuete vastuvõtvate lõpp-punktide puhul on algne kood õige.
Otsingumootoritest sattusin sellesse teemasse mitte-json andmete postitamiseks fetchiga, seega mõtlesin, et lisan selle.
Sest non-json te ei' ei pea kasutama vormiandmeid. Võite lihtsalt määrata Content-Type
päise application/x-www-form-urlencoded
ja kasutada stringi:
fetch('url here', {
method: 'POST',
headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important, if this content-type is not set it wont work
body: 'foo=bar&blah=1'
});
Alternatiivne viis selle body
stringi koostamiseks, selle asemel, et kirjutada see välja, nagu ma eespool tegin, on kasutada raamatukogusid. Näiteks funktsiooni stringify
pakettidest query-string
või qs
. Nii et seda kasutades näeks see välja järgmiselt:
import queryString from 'query-string';
fetch('url here', {
method: 'POST',
headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important, if this content-type is not set it wont work
body: queryString.stringify({for:'bar', blah:1}
});
Pärast kulutada mõned ajad, reverse engineering jsFiddle, üritab genereerida kasuliku koormuse - on mõju.
Palun vaadake (ettevaatlikult) rida return response.json();
, kus response ei ole vastus - see on lubadus.
var json = {
json: JSON.stringify({
a: 1,
b: 2
}),
delay: 3
};
fetch('/echo/json/', {
method: 'post',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: 'json=' + encodeURIComponent(JSON.stringify(json.json)) + '&delay=' + json.delay
})
.then(function (response) {
return response.json();
})
.then(function (result) {
alert(result);
})
.catch (function (error) {
console.log('Request failed', error);
});
jsFiddle:
&& Firefox > 39 && Chrome > 42