Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introdução a fetch API

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.

52711e2157a6fed933b0361cc06a6953?s=128

Marcel dos Santos

September 12, 2017
Tweet

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

  3. None
  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