GET request with axios returning undefined

Question

I'm trying to perform a get request using the following:

router.get('/marketUpdates',((request, response) => {
  console.log("market updates");
  var data: Order[]
  axios.get('http://localhost:8082/marketUpdates')
  .then(function (response) {
    console.log("GET Response")
    console.log(response.data);
    data = response.data;
  })
  .catch(function (error) {
    console.log("Error in fetching market updates");
  });  

  console.log("Data before sending is ")
  console.log(data);
  response.send(data);
}))

However, my console.log near the bottom gets executed before the console.log in .then.

data is undefined when it is being sent. Does anyone know how I can avoid this?

The code is async, so all code below the request is getting executed while the request is waiting for response. You can just move logs from bottom avoe the axios.get — Marek Urbanowicz, Jan 10 '18 at 14:26
Load up the `https://localhost:8082/marketUpdates` url in your browser directly and see if it's actually returning what you expect. Perhaps the problem is with that page, rather than the snipper you've listed here. — JakeParis, Jan 10 '18 at 14:28
Also, check the value of `response` itself (rather than `response.data`). Does it actually have a `data` property? — JakeParis, Jan 10 '18 at 14:29
I'm having the same issue but on the google cloud function. Used async-await with Axios and making a POST request to get an auth token from CRM. And the same code working perfectly on the postman. Please let me know if I'm missing in GCF. — Kanish, Aug 04 '21 at 09:30
Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, Oct 13 '21 at 16:38

Marek Urbanowicz · Accepted Answer · 2019-09-13T12:16:17.113

The code is async, so all code below the request is getting executed while the request is waiting for the response. You can just move logs from bottom avoe the axios.get
Your data inside then is not the same data as you're sending... You are using function(response) instead of arrow func. (response) => {} so you're binding another this.

Try it this way:

router.get('/marketUpdates',((request, response) => {
  console.log("market updates");
  let data: Order[]
  console.log("Data before sending is ")
  console.log(data);
  axios.get('http://localhost:8082/marketUpdates')
  .then((getResponse) => {
    console.log("GET Response")
    console.log(getResponse.data);
    data = getResponse.data;
    response.send(data);
  })
  .catch(function (error) {
    console.log("Error while fetching market updates");
  });  
}))

score 6 · Answer 2 · answered Jan 10 '18 at 14:31

Requests sent to a server are always asynchronous. That means, that the function .then() will be executed when the server responded.

Let me reformat your code:

router.get('/marketUpdates',((request, response) => {
  console.log("market updates");

  var data: Order[];

  console.log("Data before sending is ")
  console.log(data);

  axios.get('http://localhost:8082/marketUpdates')
  .then((response) => {
    console.log("GET Response")
    console.log(response.data);
    data = response.data;

    response.send(data);
  })
  .catch(function (error) {
    console.log("Error in fetching market updates");
  });  
}))

With the line axios.get('http://localhost:8082/marketUpdates') you are triggering a request to the server, who will respond, but this takes time. JavaScript will not stop it's execution of the function to keep the user interface running while the program is waiting for the server to respond.

So .get returns a Promise, that holds several function that get invoked in different scenarios. The function that is given as first parameter to .then will be invoked as soon as the server returned 200 and a response.

That means that your logs at the bottom of the code will be executed as soon as axios triggers the call to the server. At this point there is no data, because the server hasn't reacted yet.

2 similar answers almost the same time :) – Marek Urbanowicz Jan 10 '18 at 15:03 — Marek Urbanowicz, Jan 10 '18 at 15:03

GET request with axios returning undefined

2 Answers2

Linked