Fetch - Uma nova forma de fazer requisições HTTP
Tulio Faria27 de julho de 2017
Neste hands on, vamos testar o Fetch, uma alternativa que vem sendo adotada e implementada nos navegadores para substituir a forma como fazíamos requisições http no browser. Já existem módulos que implementam isso no Node, o interessante é que podemos usar a mesma API para os dois lados. Quando o navegador não tem suporte, podemos usar um Polifill.
A primeira coisa que vou fazer é adicionar como dependência no meu projeto:
yarn add node-fetch
Agora precisamos importá-lo. A primeira coisa muito interessante no fetch é que ele retorna promises, com isso fica muito mais simples de trabalharmos:
const fetch = require('node-fetch') const url = 'http//httpbin.org.get' fetch(url).then((res)=>{ console.log(res) }
Perceba que estou dando um fetch para mandar pegar essa url e em seguida ele retorna o res. Ele retorna os resultados e também um json, que é uma promise. Então simplesmente se eu fizer:
fetch(url) .then((res) => res.json()) .then((json) => console.log(json))
Ele vai dar o retorno do nosso httpbin, vamos passar algum parâmetro para saber se está alterando mesmo:
const url = 'http//httpbin.org.get?t=1'
Perceba que o args dele virá com o t=1 Utilizando essas promises fica muito mais fácil de se fazer o código e assim podemos utilizar também outros módulos, como generator ou até mesmo fazer um post com essa mesma ideia:
const urlPost = 'http//httpbin.org/post' fetch(urlPost, { method: 'Post', body: 'tulio=faria' }) .then((res) => res.json()) .then((json) => console.log(json))
A única diferença é que passamos um método para ele. Ele pega esse post e mostra para mim, inclusive o data. O interessante é que conseguimos fazer o mesmo controle de erro:
.catch((e)=>console.log(e))
Caso a URL esteja errada, ele vai retornar que não foi encontrada. Fica muito mais fácil de fazer essas requisições em HTTP. Como é uma promise, nós conseguimos fazer várias ao mesmo tempo, utilizar com generator, await async e por ai vai, fica bem mais organizado.
Eu mostrei essas duas formas, post e get, mas é simples fazer as outras formas também. Uma última coisa interessante é que, nos navegadores, ele já está disponível como window.fetch
Confira o video:
Curta o DevPleno no Facebook, inscreva-se no canal e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!
Autor
Tulio Faria27 de julho de 2017