Requisições Ajax no JavaScript com a Fetch API

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!

Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas e Pós-graduado em Projetos e Desenvolvimento de Aplicações Web. Especializado em Front End e curte desenvolvimento de jogos.

Quer receber nossas atualizações?

Inscreva-se em nossa newsletter!

Muito obrigado! A partir de agora você receberá as nossas novidades por e-mail.
ou inscreva-se via RSS Feedly!