Promise Javascript wixsite

Question

I’m getting javascript about 3 days ago so I’m very lay, I know java and c# a little. I’m making a Wix site using their own backend which is in js. From what I understand js runs the code synchronously, and because of that I am very lost. I can’t figure out how to do it in the order I want. Then I found a business called Promise that seems to do it, only I can’t understand it.

function atualizarBarraDeMembro  () {
console.log("Atualizando Barra de Membro...");
let icone = $w('#imgIcone');
let invocador = $w('#txtInvocador');
let essencia = $w('#txtValor');
let lg;
logado(local.getItem("invocador"),local.getItem("senha")).then((l) => {
    console.log("na promise(logado): "+l);
    return new Promise(() => {
        lg = l;
    });
}).then(() => {
    return getMembro(local.getItem("invocador"), local.getItem("senha"));
}).then((membro) => {
    return new Promise(() =>{
        if (lg) {
            console.log("membro: "+membro);
            icone.src =membro.icone;
            invocador.text = membro.invocador;
            essencia.text = membro.essencia;
            console.log(membro.icone);
            console.log(membro.invocador);
            console.log(membro.essencia);
        }
    })
}).then(() => {
    console.log("Barra de Membro Atualizada!");
});

}

Answer 1

Good night buddy,

Every promise needs to be resolved before Then can be triggered, in case only the resolve() in your code to indicate that the promise was fulfilled and then follow the other steps.

function atualizarBarraDeMembro  () {
console.log("Atualizando Barra de Membro...");
let icone = $w('#imgIcone');
let invocador = $w('#txtInvocador');
let essencia = $w('#txtValor');
let lg;
logado(local.getItem("invocador"),local.getItem("senha")).then((l) => {
    console.log("na promise(logado): "+l);
    return new Promise((resolve) => { //Lembrar de adicionar resolve no método para marcar a promessa como resolvida posteriormente
        lg = l;
        resolve() // <-- adicionar retorno aqui caso necessário
    });
}).then(() => {
    return getMembro(local.getItem("invocador"), local.getItem("senha"));
}).then((membro) => {
    return new Promise((resolve) =>{
        if (lg) {
            console.log("membro: "+membro);
            icone.src =membro.icone;
            invocador.text = membro.invocador;
            essencia.text = membro.essencia;
            console.log(membro.icone);
            console.log(membro.invocador);
            console.log(membro.essencia);
            resolve()
        }
    })
}).then(() => {
    console.log("Barra de Membro Atualizada!");

In this kind of situation please put the full code on github or some other medium so we can help you easier, I had to mock all the functions you left out of the file to test.

I highly recommend reading about Promisses described on the official website of Mozilla to deepen a little more knowledge.

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise