With ES2017 async/await support, this is how to POST a JSON payload:
(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);
})();Can't use ES2017? See @vp_art's answer using promises
The question however is asking for an issue caused by a long since fixed chrome bug.
Original answer follows.
chrome devtools doesn't even show the JSON as part of the request
This is the real issue here, and it's a bug with chrome devtools, fixed in Chrome 46.
That code works fine - it is POSTing the JSON correctly, it just cannot be seen.
I'd expect to see the object I've sent back
that's not working because that is not the correct format for JSfiddle's echo.
The correct code is:
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 ) ) })
For endpoints accepting JSON payloads, the original code is correct
Answer from Razor on Stack OverflowMDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Fetch_API › Using_Fetch
Using the Fetch API - Web APIs | MDN
The Fetch API provides a JavaScript interface for making HTTP requests and processing the responses.
W3Schools
w3schools.com › jsref › api_fetch.asp
JavaScript Fetch API
The fetch() method starts the process of fetching a resource from a server.
Videos
07:27
The Fetch API In 7 Minutes - Make Requests With JavaScript Easily ...
01:02:38
Day 25: JavaScript fetch() Explained Like Never Before 🤩 - YouTube
14:17
How to FETCH data from an API using JavaScript ↩️ - YouTube
06:35
Learn Fetch API In 6 Minutes - YouTube
How to Use Fetch API in JavaScript
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Window › fetch
Window: fetch() method - Web APIs | MDN
December 16, 2025 - The fetch() method of the Window interface starts the process of fetching a resource from the network, returning a promise that is fulfilled once the response is available.
WHATWG
fetch.spec.whatwg.org
Fetch Standard
The Fetch Standard also defines the fetch() JavaScript API, which exposes most of the networking functionality at a fairly low level of abstraction.
GeeksforGeeks
geeksforgeeks.org › javascript › javascript-fetch-method
Fetch API in JavaScript with Examples - GeeksforGeeks
October 31, 2025 - The Fetch API is a modern interface in JavaScript that allows you to make HTTP requests. It replaces the older XMLHttpRequest method and provides a cleaner and more flexible way to fetch resources asynchronously.
Medium
medium.com › @wisecobbler › using-the-javascript-fetch-api-f92c756340f0
Using the JavaScript Fetch API. At Shopsifter, I use a few different… | by Sophia Shoemaker | Medium
March 10, 2016 - The fetch() method takes two parameters — the URL that you are requesting (or a Request object) and an “options” object. The method returns a Promise object. The Mozilla Developer Network has some great documentation on how Promises work ...
Reddit
reddit.com › r/javascript › [askjs] what's the deal with the fetch api?
r/javascript on Reddit: [AskJS] What's the deal with the fetch API?
May 1, 2023 -
So, for every fetch we have this:
fetch(`some_URL`)
.then(function(response){
return response.text();
})
.then(function(retval){
// do something - or not - with retval, but in any case, we're done.
});It's my understanding that the first .then promise is necessary and the whole thing doesn't work unless it's there. So my question is, why isn't it built in? Why does it have to be explicitly called? Is there anything else it can do besides return the response contents?
Seems a little clunky to me.
Top answer 1 of 5
27
fetch() returns a Promise that resolves to an object that has text(), json() and blob(), which also return Promises (which resolve to the contents in the appropriate format). That's it. There isn't anything more special than that for why you need two thens, though there are multiple ways. The best would actually be to use async/await. const response = await fetch(url); const text = await response.text(); It doesn't auto-resolve to the contents because sometimes you need to know more about the response (like the status code or headers), or you may not even need the contents so why waste time parsing it, or you may need it as a blob or JSON instead of plain text.
2 of 5
10
There's also .json () and .blob() methods, which you would use depending on the type of response you're expecting. Plus, you might not always want to read the response body (although that'd certainly be rare)
Go Make Things
gomakethings.com › articles › the-javascript-fetch-method
The JavaScript fetch() method | Go Make Things
September 1, 2022 - Today, we’re going to look at ... fetch()? The window.fetch() method is used to make Ajax requests, such as calling an API or fetching a remote resource or HTML file from a server....
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Fetch_API
Fetch API - Web APIs | MDN
2 weeks ago - For making a request and fetching a resource, use the fetch() method. It is a global method in both Window and Worker contexts.
Top answer 1 of 16
1293
With ES2017 async/await support, this is how to POST a JSON payload:
(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);
})();Can't use ES2017? See @vp_art's answer using promises
The question however is asking for an issue caused by a long since fixed chrome bug.
Original answer follows.
chrome devtools doesn't even show the JSON as part of the request
This is the real issue here, and it's a bug with chrome devtools, fixed in Chrome 46.
That code works fine - it is POSTing the JSON correctly, it just cannot be seen.
I'd expect to see the object I've sent back
that's not working because that is not the correct format for JSfiddle's echo.
The correct code is:
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 ) ) })
For endpoints accepting JSON payloads, the original code is correct
2 of 16
364
I think your issue is jsfiddle can process form-urlencoded request only. But correct way to make json request is pass correct json as a body:
fetch('https://httpbin.org/post', {
method: 'POST',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({a: 7, str: 'Some string: &=&'})
}).then(res => res.json())
.then(res => console.log(res));Codemzy
codemzy.com › blog › response-body-from-fetch-in-javascript
How to get response body from fetch() in javascript - Codemzy's Blog
April 11, 2024 - If you use JavaScript to make requests or fetch responses across the network, you can use .fetch().
JavaScript.info
javascript.info › tutorial › network requests
Fetch
There’s an umbrella term “AJAX” ... from JavaScript. We don’t have to use XML though: the term comes from old times, that’s why that word is there. You may have heard that term already. There are multiple ways to send a network request and get information from the server. The fetch() method is ...
JavaScript in Plain English
javascript.plainenglish.io › javascript-and-the-fetch-api-98fdad173b85
JavaScript and the Fetch API
September 29, 2020 - The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.
Learn JavaScript
learnjavascript.online › topics › fetch.html
JavaScript Fetch API use cases for fetching data, JSON, XML, etc. | Learn JavaScript
The fetch(url) method takes one mandatory argument, the URL of the resource you want to fetch.
freeCodeCamp
freecodecamp.org › news › javascript-fetch-api-for-beginners
JavaScript Fetch API For Beginners – Explained With Code Examples
February 23, 2024 - The Fetch API is a JavaScript function that you can use to send a request to any Web API URL and get a response. In this article, I'm going to show you how to make HTTP requests to external APIs using the JavaScript Fetch API.
IONOS
ionos.com › digital guide › websites › web development › javascript fetch api
How to use JavaScript fetch - IONOS
May 28, 2025 - JavaScript fetch is a way to make API requests with Promises. It prevents code from becoming confusing and hard to read and offers numerous other features. fetch sends a request to your server of choice and executes it in the background.
npm
npmjs.com › package › openai
openai - npm
2 weeks ago - import fetch from 'my-fetch'; globalThis.fetch = fetch;
» npm install openai
Published Jun 17, 2026
Version 6.44.0
JavaScript.info
javascript.info › tutorial › network requests
Fetch API
The credentials option specifies whether fetch should send cookies and HTTP-Authorization headers with the request. "same-origin" – the default, don’t send for cross-origin requests, "include" – always send, requires Access-Control-Allow-Credentials from cross-origin server in order for JavaScript to access the response, that was covered in the chapter Fetch: Cross-Origin Requests,
GitConnected
levelup.gitconnected.com › javascript-fetch-api-basics-5b28b47cde74
JavaScript Fetch API — Basics
July 15, 2020 - Let’s state the obvious first. Fetch is a promise-based interface that allows us to make HTTP requests from JavaScript code. I will try to make that ‘Promise based’ part as easy as possible.
Mimo
mimo.org › glossary › javascript › fetch-api
JavaScript Fetch API: Syntax, Usage, and Examples
The JavaScript Fetch API makes HTTP requests simple and efficient. Use fetch() with promises or async/await to retrieve, send, and manage data seamlessly.