Exemplo com API Fetch

O método global fetch() permite que você faça solicitações de rede semelhantes ao XMLHttpRequest (XHR). A principal diferença é que a API Fetch usa o conceito de Promises, que permite uma API mais simples e mais limpa.

Veja abaixo um exemplo da mesma requisição utilizando o XMLHttpRequest e a API Fetch.

Exemplo utilizando XMLHttpRequest

function requestListener() {
  var data = JSON.parse(this.responseText);
  console.log(data);
}

function requestError(err) {
  console.log("Erro na requisição!", err);
}

var request = new XMLHttpRequest();
request.onload = requestListener;
request.onerror = requestError;
request.open("GET", "http://imd.ufrn.br/api/dados.json", true);
request.send();

Mesmo exemplo utilizando a API Fetch

fetch("http://imd.ufrn.br/api/dados.json")
  .then(function (response) {
    response.json().then(data => console.log(data));
  })
  .catch(function (err) {
    console.log("Erro na requisição!", err);
  });

Grande a diferença, né?