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

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