How to run a function only after a Javascript API call?

Question

I’m stuck in a situation here which is as follows:

The project is done in React

import hostApi from "api/hostApi";

const body = {
    token: localStorage.getItem("suavagaToken")
}

function isAuthenticated() {
    console.log("Chamou a função");
    hostApi.post("empresa/isAuthenticated", body)
        .then(response => {
            localStorage.setItem("suavagaUserIsAuth", response.data)
            console.log("Atualizou o isAuth");
        })
        .catch(err => {
            console.error("Erro ao verificar se a empresa está autenticada! :" + err)
        })
}

export default isAuthenticated;

function checkRouteAuth() {
    isAuthenticated();

    let aux = localStorage.getItem("suavagaUserIsAuth");

    console.log("Variavel aux = " + aux);
    if (aux === "true") {
        return true;

    } else {
        return false;
    }
}

I need to get my checkRouteAuth() function to continue running only after isAuthenticated() is over. I put the console.log to see the execution sequence and the following appears:

Chamou a função         auth.js:8
Variavel aux = false    Routes.jsx:14
Atualizou o isAuth      auth.js:12 

That is, the log "Updated isAuth" is running before the "Variable aux" so aux does not update at runtime. How to solve this?

Answer 1

Could use async/await so that the rest of the function checkRouteAuth() awaits the conclusion of isAuthenticated().

async function checkRouteAuth() {
    await isAuthenticated();

    let aux = localStorage.getItem("suavagaUserIsAuth");

    console.log("Variavel aux = " + aux);
    if (aux === "true") {
        return true;

    } else {
        return false;
    }
}

Remembering that this means your function checkRouteAuth() would now return a Promise<boolean>.

Updating

He would also have to return to Promise return hostApi.post... within the function isAuthenticated()