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!


author's picture

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. Estudante de Machine Learning.