Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Tentando perceber promises

Estou aqui a fazer uns testes com promises:

const listaClientes = () => {

    const promise = new Promise((resolve, reject) => {
        const http = new XMLHttpRequest(); 
        http.open("GET", "http://localhost:3000/profile");

        for(i = 0; i < 100000; i++) {
            for(x = 0; x < 10000; x++) {

            }
        } 

        http.onload = () => {
            if(http.status >= 400) {
                reject(JSON.parse(http.response));
            }else{
                resolve(JSON.parse(http.response));
            }
        }
        http.send();


    });

    return promise;

}

const listaFrutas = () => {

    const promise = new Promise((resolve, reject) => {
        const http = new XMLHttpRequest(); 
        http.open("GET", "http://localhost:3000/frutas");

        for(i = 0; i < 100000; i++) {
            for(x = 0; x < 10000; x++) {

            }
        } 

        http.onload = () => {
            if(http.status >= 400) {
                reject(JSON.parse(http.response));
            }else{
                resolve(JSON.parse(http.response));
            }
        }
        http.send();


    });

    return promise;

}

const criaLinhasPessoas = (data) => {
    let pessoas = "";
    data.forEach(pessoa => {
        pessoas += criaPessoa(pessoa);
    });

    return pessoas;
}

const criaPessoa = (pessoa) => {
    const nome = pessoa.nome;
    const email = pessoa.email;

    const pessoaHtml =             
        `<tr>
            <td class="td" data-td>${nome}</td>
            <td>${email}</td>
            <td>
                <ul class="tabela__botoes-controle">
                    <li><a href="../telas/edita_cliente.html" class="botao-simples botao-simples--editar">Editar</a></li>
                    <li><button class="botao-simples botao-simples--excluir" type="button">Excluir</button></li>
                </ul>
            </td>
        </tr>`;

    return pessoaHtml;
}


listaClientes().then((data) => {

    criaLinhasPessoas(data);
    const dataTabela = document.querySelector("[data-tabela]");
    dataTabela.innerHTML = criaLinhasPessoas(data);

    console.log("Users obtidos");

}).then(() => {
    listaFrutas().then((data) => {
        console.log(data);
    })
});

Quando termina a promise listaClientes eu executo uma outra promise listaFruta. Se eu tiver muitas promises encadeadas não vai dar o mesmo problema das callbacks?

Há algo que não estou a fazer bem?

Obrigado

2 respostas
solução!

Oi Andre, tudo bem?

Realmente, as promises são mais independentes do que as callbacks, mas quando utilizamos várias encadeadas podem se tornar muito dependentes e causar ilegibilidade. Para resolver o problema de várias dependências, podemos utilizar o async/await, que é uma solução para esse encadeamento. Você verá sobre isso ao longo do curso, nas próximas aulas.

Espero ter ajudado =) Bons estudos!

Obrigado Giovanna!