Tooge: POST json andmed

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.

Razor
Redigeeritud küsimus T00 aprill 2017 в 3:21
Programmeerimine
javascript json fetch-api
T11 aprill 2015 в 2:54
34 vaated
Lahendus

Koos ES2017 async/await toega on see, kuidas POSTida 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.

Razor
Redigeeritud vastus T00 mai 2018 в 7:21
Kommentaarid (5)

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}
});
Noitidart
Redigeeritud vastus T33 juuli 2017 в 7:04
Kommentaarid (6)

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: http://jsfiddle.net/egxt6cpz/46/ && Firefox > 39 && Chrome > 42

Iain Collins
Redigeeritud vastus T00 veebruar 2017 в 7:17
Kommentaarid (4)