CODEWITHSUNDEEP
javascriptnode.jsfetch-api
quicklikerabbit
quicklikerabbit

Reputation: 3556

Read the body of a Fetch Promise

I have the following express endpoint for uploading to Google Cloud storage. It works great and the response from the google api gives me a unique file name that I want to pass back to my front end:

app.post('/upload', (req, res) => {
  var form = new formidable.IncomingForm(),
  files = [],
  fields = [];

  form
    .on('field', function(field, value) {
      fields.push([field, value]);
    })
    .on('file', function(field, file) {
      files.push([field, file]);
    })
    .on('end', function() {
      console.log('-> upload done');
    });
  form.parse(req, function(err, fields, files){
    var filePath = files.file.path;
    bucket.upload(filePath, function(err, file, apiResponse){
      if (!err){
        res.writeHead(200, {'content-type': 'text/plain'});
        res.end("Unique File Name:" + file.name);
      }else{
        res.writeHead(500);
        res.end();
      }
    });
  });

 return;
});

I reach this endpoint by calling a short function which passes the file to it:

function upload(file) {
  var data = new FormData();
  data.append('file', file);
  return fetch(`upload`,{
    method: 'POST',
    body: data
  });
}

const Client = { upload };
export default Client;

This function is called from my front end like this:

Client.upload(this.file).then((data) => {
  console.log(data);
});

This final console.log(data) logs the response to the console. However, I don't see anywhere the response that I wrote in ("Unique File Name:" + file.name)

How I can retrieve this info from the response body on the client-side?

The data looks like this when I console.log it:

Screenshot of the data console.log

This is the response I get when I POST a file to my endpoint using Postman:

Screen shot of response using Postman

Upvotes: 157

Views: 229728

Answers (5)

Mahmoud Mabrok
Mahmoud Mabrok

Reputation: 1482

I have faced this issue from a few minutes ago.

The ultimate solution is after you have the response you have two helper methods that do the job for you:

  • response.json() will convert response into json if it was a json response.
  • response.text() will get the raw text of response(use it if above failed).

NOTE: you will need to use await() with both of above methods.

Upvotes: 3

Sivaraman
Sivaraman

Reputation: 217

If you are getting "undefined" for data and you are doing something with the response, make sure to return the response.

I was doing something like this

fetch(URL)
    .then(response => {
        response.text();
        console.log(response.statusText);
    })
    .then(data => console.log(data)); // got "undefined"

Return response object: return response.text();

fetch(URL)
    .then(response => {
        console.log(response.statusText);
        return response.text();
    })
    .then(data => console.log(data)); // got data

Upvotes: 9

quicklikerabbit
quicklikerabbit

Reputation: 3556

I had a typo in my code as pointed out by GabeRogan in this comment:

Ok awesome. To be quite honest I have absolutely no clue why you're getting undefined, except that it might be some sort of misspelling error?

Here's my updated code for the front end which returns the response body text:

Client.upload(this.file).then(response => response.text())
  .then((body) => {
    console.log(body);
  });

body is a string that reads Unique File Name: [FILE-NAME]

Here's a good explanation of the Fetch API and reading the response you get from the promise object: Css tricks: Using Fetch.

Upvotes: 31

Gabe Rogan
Gabe Rogan

Reputation: 3711

Notice you're dealing with a Response object. You need to basically read the response stream with Response.json() or Response.text() (or via other methods) in order to see your data. Otherwise your response body will always appear as a locked readable stream. For example:

fetch('https://api.ipify.org?format=json')
.then(response=>response.json())
.then(data=>{ console.log(data); })

If this gives you unexpected results, you may want to inspect your response with Postman.

Upvotes: 209

spedy
spedy

Reputation: 2360

You can also use async/await:

When returning json content:

Client.upload(this.file).then(async r => console.log(await r.json()))

or just returning in textual form:

Client.upload(this.file).then(async r => console.log(await r.text()))

Upvotes: 11

Related Questions