Fetch API Always Returning A Promise

I have the following code where I am calling an api const fetchToken = async () => { const response = await axios.post('http://localhost:3000/api/getRedisData',

Solution 1:

If you are in an async function, you can just await it to get the data.

const token = await fetchToken();
console.log(token);
// do other stuff with token

If you aren't, then you need to do everything you want done with the token in your then method. This is because you are calling an async method and without the ability to await it. The execution will just continue. The then function is the callback that happens when your async method completes successfully.

fetchToken().then(token => {
  console.log(token)
  // do other stuff with token
});

Solution 2:

All async functions return a promise. So your fetchToken() function will always return a promise. The resolved value of that promise will be whatever value you return from the fetchToken() function body.

So, the caller of fetchToken() has to use await or .then() to get that resolved value. There is no free lunch with async/await. It's still asynchronous. await gives you synchronous-like behavior inside the function, but not outside the function.

To explain a little further. As fetchToken() executes, as soon as it hits the first await, it immediately suspends further execution of the function body and then immediately returns an unresolved promise back to the caller. The caller then continues to execute and the caller has to use .then() or await to know when the body of fetchToken() is actually done and what its final returned value is.

Then, sometime later, the promises you used await on inside of fetchToken() will resolve or reject and when the JS interpreter is back to the event loop, then it will continue executing the rest of the body of fetchToken() after the await. When it finally gets to the end of the function body or encounters a return statement, then it resolves the promise that was previously returned and the caller that is using either await or .then() will get notified that it is done and will be given the final return value as the resolved value of that promise. The caller can then process that final value and do its thing.

So, you probably want to be using something like this to get the final value or the error:

fetchToken().then(token => {
    console.log(token);
    // use the token value here
}).catch(err => {
    console.log(err);
});
// you cannot use the token value here

If the call to fetchToken() itself is inside an async function, then it can use await also:

try {
    let token = await fetchToken();
    console.log(token);
    // use the token value here
} catch(err) {
    console.log(err);
}