Passing external variables into Axios.get().then() call

Question

I want to call an endpoint using Axios, then do something with the response data and a variable that was defined before the call. I know how to pass data into the callback when creating the function returning the promise myself, but since Axios is external code and I can't seem to find any option to pass extra data in the Axios docs or the config. Is there any other way to make this work, other than sending the value as data to the server and have the server respond it within the response or using an ugly workaround using the window global variable?

const animate = true; // The variable to be passed
axios.get('/endpoint.json')
    .then(function(response, animate) { // This doesn't work...
        if (response.data.coordinates) {
            console.log(animate); // ...because this is undefined
            setLocation('takeoff_location', response.data.coordinates, animate); // variable and response data need to be passed to this call
        }
    });

Why not just access the aninate variable directly, you don't need it as a parameter of then() — olayemii, Sep 02 '21 at 15:28

Tallboy · Answer 1 · 2021-09-02T15:33:11.920

the .then() is a promise and has access to any variables outside the scope (like a closure). If you want to encapsulate the API call then wrap the entire thing in a function and the arguments go there.

const doRequest = function(animate) {
  axios.get('/endpoint.json').then(function(response) {
    if (response.data.coordinates) {
      setLocation('takeoff_location', response.data.coordinates, animate);
    }
  });
};

doRequest(250);
doRequest(500);

Note that this will do 2 animation requests quickly in succession. If you want to "wait" for the other one to finish first, you would do this: (note that I'm now returning the axios request from the function). This means the promise object is returned and now you can chain more .then() functions on the "outside" of the function, which will happen only when the request finishes.

const doRequest = function(animate) {
  return axios.get('/endpoint.json').then(function(response) {
    if (response.data.coordinates) {
      setLocation('takeoff_location', response.data.coordinates, animate);
    }
  });
};

doRequest(250).then(function() {
  // this will happen when the outer API call finishes
  doRequest(500);
});

score 3 · Accepted Answer · answered Sep 02 '21 at 15:28

This creates a new animate variable, entirely unrelated to the one already defined:

function(response, animate)

This new variable "shadows" the one in the higher scope, so within this function any reference to animate only references this new variable. Which isn't defined because Axios (specifically the Promise returned by .get()) has no reason to pass a second value to this callback.

Don't shadow the variable:

function(response)

Then within the function any references to animate will reference the variable in the higher scope.

I tried that first, but that gave me another value than the one I had set. Turns out now that I have overwritten the variable somewhere in between, which caused the error. — Axel Köhler, Sep 02 '21 at 15:44

Passing external variables into Axios.get().then() call

2 Answers2