Olá,
A forma correcta de usar o async / await é como apresento em baixo?
const listaClientes = async () => {
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 = () => {
const dataTabela = document.querySelector("[data-tabela]");
dataTabela.innerHTML = criaLinhasPessoas(JSON.parse(http.response));
console.log("Users obtidos");
}
http.send();
}
const listaFrutas = async () => {
const http = new XMLHttpRequest();
try {
http.open("GET", "http://localhost:3000/frutas");
for(i = 0; i < 100000; i++) {
for(x = 0; x < 10000; x++) {
}
}
http.onload = () => {
console.log(http.response);
}
http.send();
}
catch(err) {
console(err);
}
}
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;
}
async function start() {
await listaClientes();
await listaFrutas();
}
start();
Algumas dúvidas além da primeira questão.
É sempre necessário usar a função onload? Eu lembro-me de ter feito algo semelhante a isto no passado de ir buscar valores da API e na altura usei o fetch penso eu. Seria uma possibilidade aqui também?
Outra dúvida que tenho é porque é preciso encapsular as chamadas asincronas dentro de uma função asincrona e depois chamar essa função?
Obrigado
