WebDev

JavaScript

Aula 9

Promise e fetch

USPCodeLab

Facebook:

https://facebook.com/uspcodelab/

Este trabalho do USPCodeLab  está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional

O USPCodeLab é um grupo de extensão que tem como objetivo estimular a inovação tecnológica na USP

Site:

https://codelab.ime.usp.br/

Exercícios com array 🏃‍♀️ 🏋️

Juntando com manipulação no DOM

Catálogo de filmes

(ponto de partida)

- Element.innerHTML: propriedade que permite acessar ou modificar o HTML de um elemento

Resultado final

Programação assíncrona

Execução de código síncrono

Execução de código assíncrono

TAREFA 1

TAREFA 2

TAREFA 3

tempo

tempo

Programação assíncrona

Por que usar isso em JS?

  • Muitas operações no navegador são dependentes de IO
  • Interfaces precisam continuar responsivas mesmo em operações lentas
  • Interações podem surgir independente do fluxo principal do aplicativo

Promise

Representa a conclusão eventual (ou a falha) de uma operação assíncrona e seu resultado

Usada para lidar com código assíncrono
(eventos que ocorrem de maneira independente ao fluxo principal do programa)

Estados da Promise

Rejeitada

Pendente

Resolvida

Cumprida
(Settled)

Usando Promises

A promise for resolvida

promise.then(value => {
  console.log('resolvido');
});

promise.catch(value => {
  console.log('rejeitado');
});

A promise for rejeitada

Execute uma função quando (se):

Também é possível encadear as chamadas

promise.then(value => {
  console.log('resolvido');
}).catch(value => {
  console.log('rejeitado');
});

Usando Promises

Sintaxe alternativa: await e try...catch

try {
  await promise;
  console.log('resolvido');
}
catch {
  console.log('rejeitado');
}
promise.then(value => {
  console.log('resolvido');
}).catch(value => {
  console.log('rejeitado');
});

Exemplo: video chat

function handleBotaoLigar(evt) {
  setStatusMessage("Chamando...");

  navigator.mediaDevices.getUserMedia({
    video: true, audio: true
  }).then(chatStream => {
    selfView.srcObject = chatStream;
    ...
    setStatusMessage("Conectado");
  }).catch(err => {
    setStatusMessage("Falha ao conectar");
  });
}

Exemplo: video chat

async function handleBotaoLigar(evt) {
  setStatusMessage("Chamando...");

  try {
    chatStream = await (navigator.mediaDevices.getUserMedia({
      video: true, audio: true
    }));
  }
  catch (error) {
    setStatusMessage("Falha ao conectar");
    return;
  }
    
  selfView.srcObject = chatStream;
  ...
  setStatusMessage("Conectado");
}

Fetch

Permite fazer requisições para o servidor e carrega novas informações quando necessário. Por exemplo:

  • enviar uma compra
  • carregar informação do usuário
  • receber as últimas atualizações de um feed
  • etc…

 

E tudo isso sem recarregar a página!

Fetch

AJAX

Asynchronous JavaScript And XML

Termo usado para se referir a requisições HTTP no JavaScript

 

A resposta não é necessariamente em XML, pode ser JSON

Fetch

Sintaxe básica

url: a URL que será acessada
options: parâmetros opcionais: método HTTP, cabeçalhos

Retorno: o fetch retorna um promise, que é resolvido num objeto Response assim que o servidor responder.

let promise = fetch(url, [options])

Fetch

Sintaxe básica

let response = await fetch(url);

if (response.ok) { // se o HTTP-status for 200-299
  // pega o corpo da resposta
  let json = await response.json();
}
else {
  alert("Erro HTTP: " + response.status);
}

Fetch

O retorno Response possui vários métodos baseados em Promises, que dão acesso ao corpo em vários formatos:

- response.text() – lê a resposta e retorna como texto

 

- response.json() – interpreta a resposta como JSON

 

- response.blob() – retorna a resposta como Blob (tipo de dados binário

Veja outros em: JavaScript.info/fetch

Catálogo de filmes

Usando dados reais da OMDb API!

Catálogo de filmes

(ponto de partida)

Resultado final

Tarefa

Fazer uma pokédex usando a PokéAPI

Entrega no Google Classroom

  • Nome: Pikachu
  • PokédexID: 25
  • Tipo: Elétrico
  • ...

WebDev

Obrigado pela presença!

WebDev 2021.1 - Aula 9: Promise e Fetch

By codelab@ime.usp.br

Made with Slides.com

WebDev 2021.1 - Aula 9: Promise e Fetch

  • 291

More from codelab@ime.usp.br