Entrar Ainda não tem acesso?
2
respostas

Dúvida sobre os processos assíncronos no meu código

Referente ao curso JS na web: CRUD com JavaScript assíncrono, no capítulo Comunicação assíncrona e atividade Lidando com promises

por andre18july
| 143.6k xp | 122 posts

Quando carrego a página estou a fazer dois pedidos assincronos para a API na qual adicionei dados de frutas, além de profile que já tinha.

Só que no meu código quando peço os dados dos clientes à API tenho um ciclo for que demora +/- 1s de delay para simular uma espera do banco. Depois faço um pedido das frutas e nesse pedido tenho um for que dá delay de 4s e depois escrevo no console.log as frutas. O que me está a acontecer e não percebo o porque é que os dados dos clientes só estão a ser apresentados depois das frutas serem recuperadas, ou seja ele aguarda cerca de 4s até apresentar os dados dos clientes em vez de os apresentar logo e só depois apresentar as frutas.

Alguém pode ajudar?

Envio pelo link em baixo o meu código atual: https://we.tl/t-XxATjZj1Py

Obrigado

2 respostas
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Andre, tudo bem?

O que acontece é que o próximo código após o for só será executado quando esse looping acabar, então, pelo motivo do seu código estar antes desse for, é aguardado esse looping acabar para executar a próxima linha de código.

Espero ter ajudado, bons estudos :D

por andre18july
| 143.6k xp | 122 posts

Olá Mateus,

Eu removi o for que estava no ficheiro do service dos clientes relativo à lista de clientes.

const listaClientes = async () => {

    const response = await fetch("http://localhost:3000/profile");

    if(!response.ok) {
        throw new Error("Não foi possivel listar os clientes");      
    }     

    const clientes = await response.json();
    return clientes;
}

Mas mesmo assim não estou a perceber a sequencia de execução.

No meu main.js tenho:

(async () => {
    const clientes = await clienteService.listaClientes();
    console.log(clientes);
    console.log("Passo 2");
    criaLinhasPessoas(clientes);
    console.log("Users obtidos");

    const frutas = await listaFrutas();
    console.log(frutas);

})();

Na consola ao imprimir os ele não apresenta logo os resultados e também não os lista logo no ecra. Apenas quando são recuperadas as frutas é que aparece a informação dos clientes.

Neste caso eu apenas tenho um for no service de frutas:

export const listaFrutas = () => {

    const frutas = fetch("http://localhost:3000/frutas").then((response) => {
        return response.json();
    })

    for(let i = 0; i < 500000; i++) {
        for(let x = 0; x < 50000; x++) {

        }
    } 

    return frutas;
}

Obrigado