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
   

   View Slide

2. pensandonaweb.com.br
   desenvolvedor web full-stack
   Marcel Gonçalves dos Santos
   @marcelgsantos
   

   View Slide

3. View Slide

4. @femugsp
   sp.femug.com
   

   View Slide

5. @phpsp
   phpsp.org.br
   

   View Slide

6. Como uma requisição
   assíncrona era feita?
   

   View Slide

7. iframes

   as requisições eram feitas
   em iframes e os dados
   atualizado no parent
   

   View Slide

8. XMLHttpRequest

   responsável pela revolução
   das aplicações web no início
   dos anos 2.000 com o Gmail
   

   View Slide

9. XMLHttpRequest

   complicado e
   inconsistências entre
   navegadores
   

   View Slide

10. $.ajax

    removeu inconsistências e
    adicionou expressividade
    

    View Slide

11. $.ajax

    já utilizava implementação
    com promises
    

    View Slide

12. $http

    implementação interna do
    Angular.js, altamente
    configurável, expressivo e
    com suporte promises
    

    View Slide

13. $http

    inspiração para o axios
    

    View Slide

14. Conheça a
    fetch API
    

    View Slide

15. fetch API

    implementação moderna
    e nativa para requisições
    assíncronas com suporte a
    promises
    

    View Slide

16. fetch API

    especificação viva
    coordenada pelo WHATWG
    

    View Slide

17. fetch API

    fornece uma API flexível e
    com suporte a objetos como
    Request e Response
    

    View Slide

18. fetch API

    utiliza em tecnologias como
    service workers e cache API
    

    View Slide

19. fetch API

    o método fetch recebe o
    caminho do recurso e
    retorna uma promise
    

    View Slide

20. Exemplo 01
    var req = fetch('https:!//httpbin.org/delay/3');
    console.log('fetch promise', req);
    !// Promise {status: "pending", value: undefined}
    

    View Slide

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);
    });
    

    View Slide

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);
    });
    

    View Slide

23. fetch API

    fornece suporte para o
    objeto Headers
    

    View Slide

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);
    

    View Slide

25. fetch API

    fornece suporte para o
    objeto Request
    

    View Slide

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));
    

    View Slide

27. fetch API

    fornece suporte para o
    objeto Response
    

    View Slide

28. Exemplo 06
    !// create response object
    var response = new Response('hello!', {
    ok: false,
    status: 404,
    statusText: 'NOT FOUND',
    url: '/'
    });
    console.log('response', response); 

    !// Response {!!...}
    

    View Slide

29. fetch API

    objetos Response podem
    ser utilizados com service
    workers
    

    View Slide

30. Exemplo 07
    !// clone response object
    var cloneObject = newResponse.clone();
    console.log('cloned response', cloneObject);
    !// Response {!!...}
    

    View Slide

31. fetch API

    o objeto Response possui
    diversas propriedades e
    métodos
    

    View Slide

32. fetch API

    o objeto Response permite
    manipular diversos formatos
    como json, text e blobs
    

    View Slide

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));
    

    View Slide

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);
    });
    

    View Slide

35. fetch API

    o objeto Response permite
    lidar com o envio de
    formulários
    

    View Slide

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));
    

    View Slide

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));
    

    View Slide

38. fetch API

    é possível utilizar async
    e await
    

    View Slide

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);
    })();
    

    View Slide

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));
    

    View Slide

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]));
    

    View Slide

42. Suporte
    

    View Slide

43. Can I use - fetch API
    

    View Slide

44. Polyfill - GitHub fetch
    

    View Slide

45. Vantagens e
    desvantagens
    

    View Slide

46. Vantagens
    * implementação nativa
    * suporte nos navegadores
    mais modernos
    

    View Slide

47. Desvantagens
    * utilização de polyfill para
    navegadores antigos
    * bibliotecas como axios são
    mais expressivas
    * não implementa
    cancelamento
    

    View Slide

48. Referências
    

    View Slide

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
    

    View Slide

50. Avalie!
    

    View Slide

51. Perguntas?
    

    View Slide

52. Obrigado.
    @marcelgsantos
    speakerdeck.com/marcelgsantos
    

    View Slide