O básico sobre fetch()

Mar 21, 2016

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.

home