Slide 1

Slide 1 text

!// create post request using form data fetch('https:!//httpbin.org/post', { method: 'post', body: JSON.stringify({ name: 'John Doe', email: '[email protected]', }) }) .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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

@femugsp sp.femug.com

Slide 5

Slide 5 text

@phpsp phpsp.org.br

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

XMLHttpRequest
 complicado e inconsistências entre navegadores

Slide 10

Slide 10 text

$.ajax
 removeu inconsistências e adicionou expressividade

Slide 11

Slide 11 text

$.ajax
 já utilizava implementação com promises

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

$http
 inspiração para o axios

Slide 14

Slide 14 text

Conheça a fetch API

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

fetch API
 especificação viva coordenada pelo WHATWG

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

fetch API
 utiliza em tecnologias como service workers e cache API

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

fetch API
 fornece suporte para o objeto Headers

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

fetch API
 fornece suporte para o objeto Request

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

fetch API
 fornece suporte para o objeto Response

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

fetch API
 objetos Response podem ser utilizados com service workers

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

fetch API
 o objeto Response possui diversas propriedades e métodos

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Exemplo 10 !// create post request using form data fetch('https:!//httpbin.org/post', { method: 'post', body: JSON.stringify({ name: 'John Doe', email: '[email protected]', }) }) .then(response !=> response.json()) .then(json !=> console.log('form data', json));

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

fetch API
 é possível utilizar async e await

Slide 39

Slide 39 text

Exemplo 12 !// use async and await (async function() { let response = await fetch('https:!//httpbin.org/ip'); let json = await response.json(); console.log(json); })();

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Suporte

Slide 43

Slide 43 text

Can I use - fetch API

Slide 44

Slide 44 text

Polyfill - GitHub fetch

Slide 45

Slide 45 text

Vantagens e desvantagens

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Referências

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Avalie!

Slide 51

Slide 51 text

Perguntas?

Slide 52

Slide 52 text

Obrigado. @marcelgsantos speakerdeck.com/marcelgsantos