Fetch - Uma nova forma de fazer requisições HTTP

Fetch - Uma nova forma de fazer requisições HTTP

Tulio Faria
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:
z3GOk4nOf7g
Assistir vídeo
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!
Tulio Faria
Autor
Tulio Faria27 de julho de 2017

Últimas do Blog