Question 203027 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vue.js can't receive correct return value from POST function

I would like to receive the full data like below which is what I send to backend

{
  _id: 64a8a8e9903039edb52ccc4c,
  productName: 'Vial 2ml(US) Type1',
  OracleItemNum: 8110000008,
  batchSize: 823248,
  numCntrRecv: 11,
  aqlLevel: 'II',
  createdDate: 2023-07-08T00:08:09.288Z,
  __v: 0
}

The database save what I send after I post it from frontend. The question is I didn’t received it after I post it from the frontend vue.js.
My frontend service function is like below:

function addNewSample(sample){
    const requestOptions = {
        method: 'POST',
        headers:{ 
            ...authHeader(),
            "content-type": "application/json",
        },
        body: JSON.stringify(sample)
    };
    return fetch(`${config.apiUrl}/samples/newAdd`, requestOptions).then((response) => {console.log(response)});
}

The response I received in the console is like below:

body: ReadableStream
locked: false
[[Prototype]]: ReadableStream
cancel: ƒ cancel()
getReader: ƒ getReader()
locked: (...)
pipeThrough: ƒ pipeThrough()
pipeTo: ƒ pipeTo()
tee: ƒ tee()
constructor: ƒ ReadableStream()
Symbol(Symbol.toStringTag): "ReadableStream"
get locked: ƒ locked()
[[Prototype]]: Object
bodyUsed: false
headers: Headers
[[Prototype]]: Headers
append: ƒ append()
delete: ƒ delete()
entries: ƒ entries()
forEach: ƒ forEach()
get: ƒ ()
getSetCookie: ƒ getSetCookie()
has: ƒ has()
keys: ƒ keys()
set: ƒ ()
values: ƒ values()
constructor: ƒ Headers()
Symbol(Symbol.iterator): ƒ entries()
Symbol(Symbol.toStringTag): "Headers"
[[Prototype]]: Object
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:4000/samples/newAdd"
[[Prototype]]: Response

In the backend node.js side, my controller file is like below:

const express = require('express');
const router = express.Router();
const sampleService = require('./sample.service');

//routes
router.post('/newAdd', addSample);
//router.get('/:id', getById);

module.exports = router

function addSample(req, res, next){
    sampleService.create(req.body)
    .then(sample => {
        console.log(sample);
        res.json(sample);
    })
    .catch(err => next(err));
}

My service file function in the backend side is like below:

async function create(sampleParam) {
    
    const sample = new Sample(sampleParam);
    // save sample
    const saved = await sample.save();
    const created = await Sample.findOne({_id: saved._id});
    console.log(created);
    return await created;
}

Besides, both in backend side the two console log function present the same result in the console like this below, which implies that my backend successfully received the data from the frontend:

{
  _id: 64a8a8e9903039edb52ccc4c,
  productName: 'Vial 2ml(US) Type1',
  OracleItemNum: 8110000008,
  batchSize: 823248,
  numCntrRecv: 11,
  aqlLevel: 'II',
  createdDate: 2023-07-08T00:08:09.288Z,
  __v: 0
}
{
  _id: 64a8a8e9903039edb52ccc4c,
  productName: 'Vial 2ml(US) Type1',
  OracleItemNum: 8110000008,
  batchSize: 823248,
  numCntrRecv: 11,
  aqlLevel: 'II',
  createdDate: 2023-07-08T00:08:09.288Z,
  __v: 0
}

The question is I can’t received it from the response of the frontend side.
Please help me with the problem! Thank you so much!

Tags:

2

Answers


  1. 0

    I think the answer is as simple as changing.

    .then((response) => {console.log(response)});

    to:

    .then((response) => response.body);

    And then probably you’ll want to parse that:

    .then((response) => JSON.parse(response.body));

    Now the addNewSample function should return a JSON object representation of the server response body.

    Login or Signup to reply.
  2. 0

    What you’re getting back is what the fetch Api returned at the end of the day not the data you’re expecting. You can try out async and await to resolve your fetch request.

    async function addNewSample(sample){
    try {
      const requestOptions = {
        method: 'POST',
        headers:{ 
            ...authHeader(),
            "content-type": "application/json",
        },
        body: JSON.stringify(sample)
      };
      const response = await fetch(`${config.apiUrl}/samples/newAdd`, requestOptions);
      if(!response.ok) {
        throw new Error("network error");
      }
      const data = await response.json();
      console.log(data);
      return data;
    } catch(error) {
      console.log(error);
      // handle error how you want
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search