Olá, Web Developers!
Há muito tempo que, ao fazer requisições, os desenvolvedores costumam usar a função ajax() do jQuery, pois ela é muito mais simples de usar do que o método nativo do JavaScript, o XmlHttpRequest().
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}
request.addEventListener('load', function(){
console.log(this.responseText)
});
request.open('GET', 'https://api.github.com/search/repositories?q=javascript', true);
request.send(null);
Só para pegar o XmlHttpRequest() já era chatinho. Depois, era necessário criar um listener, passando uma função de callback, uma função para mandar abrir a conexão e, por fim, executar a função que iria enviar a requisição.
Muitos desenvolvedores iniciantes até chegam a inserir o jQuery em seus projetos apenas por causa da função $.ajax(), enquanto outros criam funções para facilitar o uso do XmlHttpRequest(). O AngularJS até nos disponibilizava o serviço $http, para facilitar as requisições, e assim não era preciso incluir o jQuery para esse propósito.
O fetch() faz a mesma coisa, mas com uma API nova, mais flexível e simples de usar. Ela tem a premissa de substituir a antiga XMLHttpRequest.
fetch('https://api.github.com/search/repositories?q=javascript')
.then(response => response.json())
Uau!
O único parâmetro obrigatório do fetch() é uma String que indica o endereço de onde iremos fazer a requisição. Com isso, faremos uma requisição GET.
O fetch() nos retorna uma Promise. Essa Promise retorna um objeto Response com informações da resposta do servidor. Como queremos pegar a resposta em formato JSON, basta executar a função json().
Configurando a requisição
O fetch() aceita um segundo parâmetro, onde podemos passar um objeto de configuração. É nele onde indicamos o método da requisição, cabeçalho, corpo, etc.
fetch('https://myexample.com', {
method: 'POST',
headers: {'Content-Type':'application/x-www-form-urlencoded'},
body: 'foo=bar&blah=1'
})
.then(response => response.json())
- method - GET | POST | PUT | DELETE | HEAD
- url - URL da requisição
- headers - cabeçalho
- body - corpo da requisição
- referrer - referência da requisição
- mode - cors | no-cors | same-origin
- credentials - indica se os cookies devem ser enviados junto com a requisição
- redirect - follow | error | manual
- integrity - valor de integridade da fonte
- cache - modo do cache (default | reload | no-cache)
Finalizando
Veja então que o fetch() é bem mais simples de usar e, atualmente, ele já tem um bom suporte por parte dos navegadores modernos, como você pode visualizar aqui no caniuse. Qualquer coisa, pode-se criar um fallback para dar suporte a navegadores antigos (se for muito necessário para o seu projeto :P).
Você já tem usado o fetch()? Compartilhe com a gente aí nos comentários!
