Introdução a fetch API

As requisições HTTP assíncronas revolucionaram as aplicações web há pouco mais de uma década com o AJAX. Porém, a API XMLHttpRequest nunca foi muito prática e era preferível utilizar abstrações de bibliotecas como jQuery. A introdução da API fetch permite trazer a simplicidade das bibliotecas para o JavaScript puro de uma forma prática e moderna. Nessa palestra será mostrada o funcionamento de fetch, como a utilização de promises torna o código mais expressivo, o funcionamento de Headers, Request e Response, manipulação de JSON e o suporte entre os navegadores e polyfills.

Transcript

1. !// create post request using form data fetch('https:!//httpbin.org/post', { method: 'post', body: JSON.stringify({ name: 'John Doe', email: 'john.doe@gmail.com', }) }) .then(response !=> response.json()) .then(json !=> console.log('form data (params)', json)); !// create post request using form data fetch('https:!//httpbin.org/post', { method: 'post', body: new FormData(document.getElementById('form-login')) }) .then(response !=> response.json()) .then(json !=> console.log('form data (html)', json)); Marcel Gonçalves dos Santos @marcelgsantos { } Fetch API Introdução a
2. pensandonaweb.com.br desenvolvedor web full-stack Marcel Gonçalves dos Santos @marcelgsantos
4. @femugsp sp.femug.com
5. @phpsp phpsp.org.br
6. Como uma requisição assíncrona era feita?
7. iframes
 as requisições eram feitas em iframes e os dados atualizado no parent
8. XMLHttpRequest
 responsável pela revolução das aplicações web no início dos anos 2.000 com o Gmail
9. XMLHttpRequest
 complicado e inconsistências entre navegadores
10. $.ajax
 removeu inconsistências e adicionou expressividade
11. $.ajax
 já utilizava implementação com promises
12. $http
 implementação interna do Angular.js, altamente configurável, expressivo e com suporte promises
13. $http
 inspiração para o axios
14. Conheça a fetch API
15. fetch API
 implementação moderna e nativa para requisições assíncronas com suporte a promises
16. fetch API
 especificação viva coordenada pelo WHATWG
17. fetch API
 fornece uma API flexível e com suporte a objetos como Request e Response
18. fetch API
 utiliza em tecnologias como service workers e cache API
19. fetch API
 o método fetch recebe o caminho do recurso e retorna uma promise
20. Exemplo 01 var req = fetch('https:!//httpbin.org/delay/3'); console.log('fetch promise', req); !// Promise {status: "pending", value: undefined}
21. Exemplo 02 !// create a fetch request, returns a promise var req = fetch('https:!//httpbin.org/headers'); !// resolve a promise, print success and status !// text and show json response req.then(function(response) { console.log(‘response (props)’, 
 response.ok, response.statusText); return response.json(); }).then(function(json) { console.log('json response', json); });
22. Exemplo 03 !// resolve a rejected promise and print error fetch('https:!//httpbin.org/headers') .then(function(response) { return response.json(); }).then(function(json) { console.log('json response', json); }).catch(function(error) { console.log('error', error); });
23. fetch API
 fornece suporte para o objeto Headers
24. Exemplo 04 !// create a new header using constructor var header = new Headers({ 'Content-Type': 'text/plain', 'X-Token': 'my-precious-token' }); console.log('headers', header);
25. fetch API
 fornece suporte para o objeto Request
26. Exemplo 05 !// create a request object var request = new Request('https:!//httpbin.org/delay/1', { method: 'GET', mode: 'cors', redirect: 'follow', headers: new Headers({ 'Content-Type': 'text/plain' }) }); console.log('request', request); !// Request {!!...} !// create a fetch using a request object fetch(request) .then(response !=> console.log('response', response));
27. fetch API
 fornece suporte para o objeto Response
28. Exemplo 06 !// create response object var response = new Response('hello!', { ok: false, status: 404, statusText: 'NOT FOUND', url: '/' }); console.log('response', response); 
 !// Response {!!...}
29. fetch API
 objetos Response podem ser utilizados com service workers
30. Exemplo 07 !// clone response object var cloneObject = newResponse.clone(); console.log('cloned response', cloneObject); !// Response {!!...}
31. fetch API
 o objeto Response possui diversas propriedades e métodos
32. fetch API
 o objeto Response permite manipular diversos formatos como json, text e blobs
33. Exemplo 08 !// response object are returning json fetch('https:!//httpbin.org/ip') .then(response !=> response.json()) .then(json !=> console.log('response (json)', json)); !// response object are returning text fetch('https:!//httpbin.org/ip') .then(response !=> response.text()) .then(text !=> console.log('response (text)', text));
34. Exemplo 09 !// response object are returning blob fetch('https:!//httpbin.org/image/png') .then(response !=> response.blob()) .then(blob !=> { console.log('response (blob)', blob); document.querySelector('img').src = URL.createObjectURL(blob); });
35. fetch API
 o objeto Response permite lidar com o envio de formulários
36. Exemplo 10 !// create post request using form data fetch('https:!//httpbin.org/post', { method: 'post', body: JSON.stringify({ name: 'John Doe', email: 'john.doe@gmail.com', }) }) .then(response !=> response.json()) .then(json !=> console.log('form data', json));
37. Exemplo 11 !// create post request using form data fetch('https:!//httpbin.org/post', { method: 'post', body: new FormData(document.getElementById('form-login')) }) .then(response !=> response.json()) .then(json !=> console.log('form data (html)', json));
38. fetch API
 é possível utilizar async e await
39. Exemplo 12 !// use async and await (async function() { let response = await fetch('https:!//httpbin.org/ip'); let json = await response.json(); console.log(json); })();
40. Exemplo 13 !// create requests using axios library axios.get('https:!//httpbin.org/ip') .then(response !=> console.log(response)); axios.get('https:!//httpbin.org/status/500') .catch(error !=> console.log(error));
41. Exemplo 14 !// create multiple requests Promise.all([ fetch('https:!//httpbin.org/delay/5') .then(response !=> response.json()), fetch('https:!//httpbin.org/delay/2') .then(response !=> response.json()) ]).then(values !=> console.log(values[0], values[1]));
42. Suporte
43. Can I use - fetch API
44. Polyfill - GitHub fetch
45. Vantagens e desvantagens
46. Vantagens * implementação nativa * suporte nos navegadores mais modernos
47. Desvantagens * utilização de polyfill para navegadores antigos * bibliotecas como axios são mais expressivas * não implementa cancelamento
48. Referências
49. Referências * https:/ /davidwalsh.name/fetch * https:/ /fetch.spec.whatwg.org * https:/ /developer.mozilla.org/en-US/ docs/Web/API/Fetch_API * https:/ /braziljs.org/blog/fetch-api-e- o-javascript/ * https:/ /github.com/github/fetch * http:/ /caniuse.com/#feat=fetch
50. Avalie!
51. Perguntas?
52. Obrigado. @marcelgsantos speakerdeck.com/marcelgsantos