How to Use Javascript's Fetch to get POST Request Data?

Question

I am trying to make a POST request using Javascript's fetch method as described here.

I get a ReadableStream instead of a usual json response, such as what I would get with jQuery, Angular, whatever.

My code is here: https://jsbin.com/vuwilaviva/edit?css,js,output

var request = new Request('https://httpbin.org/post', {
    method: 'POST', 
    mode: 'cors',
    data: 'The sky is green',
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
});


// Now use it!
fetch(request).then(function(resp) {
  console.log('Logging response...')
  console.log(resp);
});

The test API endpoint works fine with postman, curl, etc, so I am sure I am using fetch wrong, and it's not an issue with the API (it just returns whatever string is passed to it as data):

Edit: The current answer doesn't actually get the data returned by the post request - it's nowhere to be found in the logged json:

That link tells you how to get JSON from the response, in the section with the header Handling JSON... — Heretic Monkey
– Heretic Monkey, Commented Jul 25, 2017 at 20:59
Can you try something else that it details on that page? You seem to be a bit confused as to how exactly JSON is used. Your last edit shows what was returned in the Postman result above it, as a JavaScript object, which is what JSON is meant to provide. If you don't want JSON, but just want text, see the section with the header Handling Basic Text/HTML Responses just below the section I pointed to you... — Heretic Monkey
– Heretic Monkey, Commented Jul 26, 2017 at 15:38
@MikeMcCaughan Changing response type to text just gets me the json object as text. I still don't see the data I need. And yes, I did try what you pointed me to. — VSO
– VSO, Commented Jul 26, 2017 at 15:51

pethel · Accepted Answer · 2017-07-25 20:56:07Z

3

response.json should be used for this

fetch(request)
.then(response => response.json())
.then(json => console.log(json));

answered Jul 25, 2017 at 20:56

pethel

5,53714 gold badges60 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

dandavis Over a year ago

fun fact: you can now use .then(console.log) in chrome, maybe others (they fixed this)

VSO Over a year ago

@pethel: Two things here - 1. This doesn't get me what I need - I don't see the response string in the json. 2. Can you explain your answer, why the two then statements? Isn't the call already async, why is the response a stream?

pethel Over a year ago

@VSO your issue is the contenttype response.json() -> response.text() now and you can log the content as text. Try to change to application/json but you also need to adjust your server code because.

VSO Over a year ago

@pethel My "backend" is the test API here httpbin.org. It works just fine using anything by fetch, so I don't imagine that's the problem, unless I don't understand some implementation detail.

pethel Over a year ago

@VSO jsbin.com/cedaxabida/edit?css,js,output , hope you see the update. I changed the headers.

|

Collectives™ on Stack Overflow

How to Use Javascript's Fetch to get POST Request Data?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related