Como utilizar fetch();

Fetch, permite fazer request similiar a forma como era feito antigamente com o XMLHttpRequest. A principal diferença é que o fetch utiliza promisses, o que gera uma API limpa e simples, sem callback hell.

 Request básico

O 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!
});

 Lidando com JSON

Se você for usar JSON, o 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);  
});

Faustão fellings

 
7
Kudos
 
7
Kudos

Now read this

Tipos de hyperlinks

Um guia dos diferentes tipos de links. Tipos de links são bons para descrever a relação entre duas ou mais páginas e também podem expressar a razão de porque certos links estão na página. Definir tipos de links também ajuda no SEO, já... Continue →