[Anderson Paraibano]

Ao desenvolver aplicativos da web modernos, é comum a necessidade de realizar solicitações assíncronas ao servidor para buscar ou enviar dados sem interromper a experiência do usuário. Uma abordagem comum para isso é usar a API XMLHttpRequest, disponível em JavaScript, que permite a comunicação assíncrona com servidores.

No entanto, ao trabalhar em projetos complexos com vários processos e componentes diferentes, pode ser desafiador manter um bom padrão de uso das solicitações XMLHttpRequest em toda a aplicação. Neste artigo, exploraremos um padrão recomendado para utilizar essas solicitações em vários contextos, a fim de garantir a consistência, manutenibilidade e eficiência do código.

Antes de prosseguirmos, é importante mencionar que, desde a introdução do ES6, temos à nossa disposição uma alternativa mais moderna e poderosa ao XMLHttpRequest, chamada de Fetch API. No entanto, abordaremos especificamente o uso do XMLHttpRequest neste artigo, considerando que pode ser necessário trabalhar com bibliotecas ou projetos legados que ainda o utilizam.

O primeiro passo para estabelecer um bom padrão é criar uma função genérica que encapsule a lógica comum das solicitações XMLHttpRequest. Essa função pode receber parâmetros, como o tipo de método HTTP (GET, POST, PUT, DELETE), a URL de destino, os dados a serem enviados e qualquer outra informação necessária para a solicitação.

javascript
Copy code
function fazerRequisicao(method, url, dados, callback) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);

xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
callback(null, xhr.responseText);
} else {
callback(new Error(‘Ocorreu um erro na solicitação.’));
}
};

xhr.onerror = function() {
callback(new Error(‘Ocorreu um erro na solicitação.’));
};

xhr.send(dados);
}
Essa função fazerRequisicao cria uma nova instância de XMLHttpRequest, configura a solicitação com base nos parâmetros fornecidos e define os callbacks para os eventos onload e onerror. No caso de uma resposta bem-sucedida (código de status entre 200 e 399), o callback é chamado passando null como primeiro argumento e a resposta da solicitação como segundo argumento. Caso contrário, um objeto de erro é passado como primeiro argumento do callback.

Agora, podemos utilizar essa função genérica em diferentes processos do nosso aplicativo. Por exemplo, se tivermos um formulário que precise ser enviado via AJAX, podemos fazer o seguinte:

javascript
Copy code
var formulario = document.getElementById(‘meuFormulario’);
formulario.addEventListener(‘submit’, function(evento) {
evento.preventDefault();

var dados = new FormData(formulario);
fazerRequisicao(‘POST’, ‘/api/salvar’, dados, function(erro, resposta) {
if (erro) {
console.error(erro);
} else {
console.log(resposta);
}
});
});
No exemplo acima, estamos ouvindo o evento de envio do formulário e interrompendo o comportamento padrão (que seria o envio síncrono do formulário). Em seguida, criamos um objeto FormData com os dados do formulário e chamamos a função fazerRequisicao com os parâmetros apropriados.

Além disso, podemos reutilizar a função fazerRequisicao em outras partes do aplicativo. Por exemplo, se tivermos um botão que precise carregar dados do servidor ao ser clicado, podemos fazer o seguinte:

javascript
Copy code
var meuBotao = document.getElementById(‘meuBotao’);
meuBotao.addEventListener(‘click’, function() {
fazerRequisicao(‘GET’, ‘/api/dados’, null, function(erro, resposta) {
if (erro) {
console.error(erro);
} else {
console.log(resposta);
}
});
});
Nesse caso, estamos chamando a função fazerRequisicao no evento de clique do botão, passando os parâmetros adequados para uma solicitação GET.

Ao adotar esse padrão de uso do XMLHttpRequest em várias solicitações assíncronas, podemos obter os seguintes benefícios:

Consistência: Utilizando a mesma função para todas as solicitações, garantimos uma abordagem consistente em todo o código do aplicativo.

Manutenibilidade: Ao encapsular a lógica comum em uma função genérica, facilitamos a manutenção e evitamos a duplicação de código. Qualquer alteração necessária pode ser feita em um único local.

Eficiência: A comunicação assíncrona com o servidor evita bloqueios e mantém a responsividade da interface do usuário. Além disso, podemos reutilizar a função fazerRequisicao em vários contextos, promovendo um uso eficiente dos recursos.

Em resumo, estabelecer um padrão consistente e eficiente para o uso de solicitações XMLHttpRequest em diferentes processos do aplicativo pode melhorar significativamente a qualidade e a manutenibilidade do código. A função genérica fazerRequisicao apresentada neste artigo é um exemplo de como isso pode ser alcançado, permitindo uma comunicação assíncrona eficiente e reutilizável.

[Autor]

Posts