Axios - Cant set and get data in object

Question

I am using the Axios library for my ajax requests so I created an instance of axios.

When I hit the endpoint /user/login, the success response will return me a token that I will use in the header for future calls as the API is secured.

The problem is when I do a console.log(authUser) the object is empty even though in the .then(), I am setting authUser.bearerToken.

Why is this happening? And what's the solution? Thanks. See code below.

var ax = axios.create({
    baseURL: 'http://api.site.test',
    timeout: 5000,
    headers: { 
        'X-Api-Client-Secret': 'xxxxxxxxxxxxxxxx' 
    }
});


var authUser = {};

// log the user in
ax.post('/user/login', {
    email: 'e@maiiiiiiiiil.com',
    password: 'ThisIsACoolPassword123!'
})
.then(function (response) {
    // set the bearer token
    authUser.bearerToken = response.data.token;
    ax.defaults.headers.common['Authorization'] = authUser.bearerToken;
})
.catch(function (error) {
    console.log(error);
});

console.log(authUser);

Possible duplicate of [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) — zero298, Aug 20 '18 at 20:45

score 0 · Answer 1 · answered Aug 20 '18 at 20:30

It's because its async. The code that talks to /user/login takes some time but your code continues.

So the order is

Create base axios
Define authUser as empty object
Send a request to /user/login
Console.log authUser
Get the response from the post request

You can see it more clearly if you put 3 console logs.

var ax = axios.create({
    baseURL: 'http://api.site.test',
    timeout: 5000,
    headers: { 
        'X-Api-Client-Secret': 'xxxxxxxxxxxxxxxx' 
    }
});


var authUser = {};
console.log('authUser is ' + authUser);

// log the user in
ax.post('/user/login', {
    email: 'e@maiiiiiiiiil.com',
    password: 'ThisIsACoolPassword123!'
})
.then(function (response) {
    // set the bearer token
    authUser.bearerToken = response.data.token;
    ax.defaults.headers.common['Authorization'] = authUser.bearerToken;
    console.log('2. authUser is ' + authUser);
})
.catch(function (error) {
    console.log(error);
});

console.log('3. authUser is ' + authUser);

You will see it in the following order: 1, 3, 2 and not 1, 2, 3.

0.sh · Answer 2 · 2018-08-20T20:48:12.560

ax.post is asynchronous ( non blocking ) so it won't execute in the order you want it to execute i.e it can execute any time ( or concurrently ). you either have to use callbacks or async...await to handle this

function f() {

    var ax = axios.create({
        baseURL: 'http://api.site.test',
        timeout: 5000,
        headers: { 
            'X-Api-Client-Secret': 'xxxxxxxxxxxxxxxx' 
        }
    });

    var authUser = {};
    var response;

    ; ( async () => {

        // log the user in
        try {
            response = await ax.post('/user/login', {
                email: 'e@maiiiiiiiiil.com',
                password: 'ThisIsACoolPassword123!'
            })
        } catch(ex) {
           response = ex;
        } finally {
           if ( Error[Symbol.hasInstance](response) )
               return console.log(response);
           authUser.bearerToken = response.data.token;
           ax.defaults.headers.common['Authorization'] = authUser.bearerToken;
         }
    })(); 
    console.log(authUser)
}

Axios - Cant set and get data in object

2 Answers2