Express response.send() object not received by JavaScript fetch() ... why?

Question

Documentation from Express response.send allows for objects to be sent in the body, which I am sending as follows:

  DBM.saveArticle(obj).then((val) => {
    console.log(val); // verified here
    res.send(val);
    res.end();
    // ... clip here

However on the client I am not getting the object. This is a Create in CRUD, and I am using fetch POST as follows to implement this.

    // ... snip
    const options = { 
      headers: {'Content-Type': 'application/json'}, 
      method: 'POST', 
      body: JSON.stringify(this.state)
    };    
    fetch("/articles/add", options)
      .then((response) => {
        console.log('DEBUG: Article Added: ', response); // nothing found here in response
        this.props.dispatch({type: 'addArticle', component_state: state});
      })
      .catch((error) => {
        console.log('fetch/POST error', error);
      });
      // ... snip

console.log from above looks like this, here is a pic, it is empty, as far as I can tell.

The response object is big, and I tried to click all about it, but it is possible I might have missed something.

The official docs for JavaScript fetch response object is here on MDN.

Rami Jarrar · Accepted Answer · 2020-12-10 06:07:54Z

1

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Response_objects

This is just an HTTP response, not the actual JSON. To extract the JSON body content from the response, we use the json() method (defined on the Body mixin, which is implemented by both the Request and Response objects.)

https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream

The Fetch API offers a concrete instance of a ReadableStream through the body property of a Response object.

fetch returns the body as a ReadableStream to convert it to a JSON use response.json()

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())   // << this will convert the response to JSON object
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

The data in the ReadableStream is not accessible without consuming the stream, it's stored in a lower-level I/O source, called the underlying source, and there are two types of underlying source: push and pull sources.

In case of HTTP request it's a push source in the form of a TCP socket, where data is constantly being pushed from the OS level, and the data will be accessible to the consumer (your code) once you acquire a lock and start reading it, which is exactly what json() method do for you.

refer to this for more details https://streams.spec.whatwg.org/#rs-model

edited Dec 10, 2020 at 6:07

answered Dec 10, 2020 at 5:03

Rami Jarrar

4,6537 gold badges39 silver badges54 bronze badges

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

2 Comments

Rami Jarrar Over a year ago

the response body is a stream, so no you can't see it, without consuming it, that's what .json() will do

user14704144 Over a year ago

I ran a search for ReadableStream here on MDN doc for fetch() and nothing came up.

Collectives™ on Stack Overflow

Express response.send() object not received by JavaScript fetch() ... why?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related