Boa noite, Mariana! Como vai?
Vou responder suas perguntas separadamente para facilitar o entendimento!
se a requisição da busca só é enviada após o método ".send()" ser lido, por que ele só é incluído depois de toda a função que exibe os dados coletados na tela?
Antes de mais nada, vamos considerar o código a seguir:
var botaoAdicionar = document.querySelector("#buscar-pacientes");
botaoAdicionar.addEventListener("click", function(){
console.log("Buscando pacientes...");
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");
xhr.addEventListener("load", function(){
var resposta = xhr.responseText;
console.log(resposta);
console.log(typeof resposta);
var pacientes = JSON.parse(resposta);
console.log(pacientes);
console.log(typeof pacientes);
});
xhr.send();
});
Veja que a função anônima passada como segundo parâmetro para o método addEventListener()
só será executada quando a resposta da requisição for obtida! Inclusive, por isso, chamamos essa função anônima de função callback! Em outras palavras, uma função callback é qualquer função que seja executada em decorrência de um evento ( nesse caso, o evento é a obtenção da resposta ).
Portanto, colocar o addEventListener()
antes do send()
não implica que a função anônima será executada antes do send()
!
Isto quer dizer que o programa busca e carrega todos os dados da API e só depois completa a requisição?
Não, isso quer dizer que quando a requisição for completada somente então a função anônima será executada e aí sim os dados obtidos da API poderão ser manipulados da forma que vc quiser!
Pegou a ideia? Qualquer coisa é só falar!
Grande abraço e bons estudos, minha aluna!