APIs e Microsserviços

22 dez, 2016

Usando Fetch API com o Fitch.js

Publicidade

Estamos em um período no qual é muito comum usar um cliente HTTP para se comunicar com APIs no padrão REST. Por existirem muitas opções de bibliotecas, fica difícil escolher uma ideal para seu projeto. Com base nisso, vou tentar apresentar aqui mais uma, que talvez se torne a melhor escolha pra você =).

Fetch

Fetch é muito similar ao XMLHttpRequest, mas mais poderoso e mais simples de usar. Por estar presente em quase todos os browsers atuais, a aplicação é muito menos preocupante, mas dependendo de seu projeto vai ser necessário um polyfill para browsers antigos.

Veja um exemplo de GET, usando Fetch API:

fetch('file.json') // URL de destino.
.then(response => { // 'response' possui todas informações da resposta.
  if(response.ok) { // Bool para checar a respota.
    return response.json(); // É necessário transformar o 'body' para json, para que possa ser manipulado
  }
})
.then(data => { // Recebe o 'data' em formato json.
  console.log(data);
})
.catch(err => { // Recebe um objeto contendo as informações do erro.
  console.log(err.message);
});

Como podemos ver, seu uso é bem simples, mas pode ficar “verboso” caso tenhamos que fazer um request personalizado, como no caso abaixo:

const config = {
  method: 'POST',
  body: JSON.stringify({ cat: 'grumpy' }),
  cache: 'no-cache',
  mode: 'no-cors',
}

fetch('http://localhost:8080/cats?categ=10&type=5', config)
.then(response => {
  if(response.ok) {
    return response.json();
  }
})
.then(data => {
  console.log(data);
})
.catch(err => {
  console.log(err.message);
});

Podemos ver que nesses dois exemplos temos verificações que se repetem e outras coisas que poderiam ser simplificadas. E é com essa ideia que surge o Fitch.js, que simplifica o uso do Fetch e ainda o torna disponível para browsers antigos e até para ser usado no Node.js.

Fitch.js

Para começar, vamos instalar o Fitch.js. Utilize um dos comandos abaixo:

# usando npm
npm i --save fitch

# ou usando o yarn
yarn add fitch

Pronto, você já pode usar o Fitch.js em seu projeto.

Vejamos como ficaria o exemplo 1, usando nossa nova biblioteca:

import fitch from 'fitch';

fitch.get('file.json')
.then(response => {
  console.log(response.data);
})
.catch(err => {
  console.log(err.message);
});

Não é necessário verificar a resposta, nem transformar em json. O Fitch.js já faz isso por você, o que permite acabar com códigos duplicados.

Perceba que está explícito que é um request usando o método GET, o que facilita a leitura.

Com o exemplo 2, dá para perceber melhor a vantagem de usar:

import fitch from 'fitch';

const config = {
  body: { cat: 'grumpy' },
  cache: 'no-cache',
  mode: 'no-cors',
  params: {
    categ: 10,
    type: 5,
  },
}

fitch.post('http://localhost:8080/cats', config)
.then(response => {
  console.log(response.data);
})
.catch(err => {
  console.log(err.message);
});

O Fetch é uma ótima opção para a maioria das nossas aplicações. Mas podemos ver que o Fitch.js facilita muito o uso e nos permite ter um código mais legível, além de poder ser usado em browsers mais antigos e também em Node.js. Existem mais coisas que você pode fazer com o Fitch.js. Confira aqui. Aproveite para contribuir reportando os problemas que encontrar e até ajudando na documentação ou em novas features. ? Também deixe seu comentário abaixo. É sempre bom saber o que achou. Até a próxima!

***

Artigo publicado originalmente em http://www.concretesolutions.com.br/2016/12/07/usando-fetch-api-com-o-fitch-js/.