O básico sobre fetch()

Fetch, permite fazer request da mesma forma como era feito antigamente com o XMLHttpRequest. Uma das diferenças é que ele utiliza Promisses, o que gera uma API limpa e simples.

Request básico

Fetch recebe dois parâmetros, um sendo a url, e o outro as opções:

fetch('/site/url')
  .then(function(response) { // Resposta })
  .catch(function(err) { // Errou! });

Se você usar es6 fica ainda mais bonito:

fetch("/site/url")
  .then((response) => console.log(response))
  .catch((err) => console.log("Errou!"));

Lidando com JSON

Se você for usar JSON, o parâmetro do callback tem um método chamado .json(), que ira transformar sua resposta em um objeto javascript:

fetch("/site/url/json")
  .then(function (response) {
    // Converte para JSON
    return response.json();
  })
  .then(function (js) {
    // Objeto javascript
    console.log(js);
  });

Text

Se o seu serviço recebe um HTML como resposta, aqui está como você lida com uma resposta em html ou texto:

fetch("/site/url")
  .then(function (response) {
    // Transforma em texto
    return response.text();
  })
  .then(function (txt) {
    // String
    console.log(txt);
  });

Headers and Metadatas

Response headers e metadatas são encontrados no objeto response, e o método get é mostrado a seguir:

fetch("/site/url").then(function (response) {
  console.log(response.headers.get("Content-Type"));
  console.log(response.headers.get("Date"));
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.type);
  console.log(response.url);
});

Você também pode setar headers no seu request, mas não pode setar cookies.

fetch("/site/url", {
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});

Método POST

Você também pode usar esse método com o fetch, basta setar as opções como eu mostro a seguir.

fetch("/site/url", {
  method: "post",
  headers: {
    "Content-type": "application/x-www-form-urlencoded",
  },
  body: "a=1&b=2",
})
  .then(function (res) {
    return res.json();
  })
  .then(function (data) {
    console.log("Resposta em JSON", data);
  })
  .catch(function (error) {
    console.log("Faustão fellings", error);
  });

Compatibilidade

Fetch ainda não tem suporte em 100% dos browsers mas você pode usar um polyfill feito pelo pessoal do github.

O intuito desse post foi mostrar o básico se você deseja saber ainda mais recomendo a leitura desse posts que vale muito a pena.