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

Programação Assíncrona em JavaScript - do básico ao avançado

Programação Assíncrona em JavaScript - do básico ao avançado

Estamos acostumados a programar utilizando um fluxo de execução síncrono. Porém, nos dias de hoje, programar em JavaScript contempla inúmeras operações assíncronas. Desde um simples timer utilizando setTimeOut, passando por respostas a eventos do DOM ou requisições assíncronas AJAX até operações de I/O como a escrita de um arquivo. A compreensão e domínio da programação assíncrona é essencial para o desenvolvedor JavaScript moderno. Nesta palestra serão apresentados inúmeros conceitos e exemplos relacionados a programação assíncrona. Falaremos sobre fluxo de execução de um programa, programação assíncrona, callbacks e closures, promises, generators e funções async.

Marcel dos Santos

July 19, 2019
Tweet

More Decks by Marcel dos Santos

Other Decks in Programming

Transcript

  1. Interaja nas mídias sociais!
 
 - fale sobre o evento,

    palestrantes e conteúdo - tire fotos do evento e publique
 - interaja com outros participantes do evento - tire dúvidas ou dê feedbacks para os palestrantes
  2. 1. seguir @marcelgsantos no Twitter
 2. tuitar utilizando as hashtags

    #TheDevConf, #TrilhaJavaScript e #Async
 3. não vale tuíte em branco e retuíte
 4. ler e preencher este simples formulário
 bit.ly/sorteio-tdc-sp-2 Concorra a um livro da Casa do Código!
  3. o fluxo de execução de um programa é determinado pela

    ordem em que suas instruções são executadas
  4. normalmente é sequencial e segue a ordem em que as

    instruções aparecem no código
  5. existem diversas instruções para guiar o fluxo de execução como

    if, else, for, while, try…catch entre outras
  6. !// execution flow 
 let val1 = prompt('Input the first

    value:'); let val2 = prompt('Input the second value:'); val1 = parseInt(val1); val2 = parseInt(val2); if ((val1 !>= 1 !&& val1 !<=10) !&& (val2!>= 1 !&& val2 !<=10)) { let result = sum(val1, val2); console.log('The result is %d.', result); } else { console.log('There was a problem during the calculation.'); }
  7. um código é síncrono quando uma instrução é executada somente

    quando a instrução anterior estiver terminado
  8. !// synchronous code
 let val1 = prompt('Input the first value:');

    let val2 = prompt('Input the second value:'); val1 = parseInt(val1); val2 = parseInt(val2); if ((val1 !>= 1 !&& val1 !<=10) !&& (val2!>= 1 !&& val2 !<=10)) { let result = sum(val1, val2); console.log('The result is %d.', result); } else { console.log('There was a problem during the calculation.'); }
  9. !// asynchronous code fs.readFile('lorem.txt', {encoding: 'utf8'}, function(err, text) { if

    (err) { console.log('Houston, we have a problem!'); return; }
 console.log(text); !// [2] Lorem ipsum dolor sit amet!!... }); console.log('Finished'); !// [1] Finished
  10. um código bloqueante é aquele que bloqueia a execução de

    uma instrução até que a instrução anterior seja finalizada
  11. o espirro é algo bloqueante, ou seja, paramos “tudo” o

    que estamos fazendo quando vamos espirrar!
  12. um código não-bloqueante é aquele que não bloqueia a execução

    de uma instrução com base em uma instrução anterior não finalizada
  13. o ser humano é multitarefa e pode andar, falar e

    comer ao mesmo tempo, ou seja, são tarefas não-bloqueantes
  14. o JavaScript é executado em um única thread, ela é

    conhecida como main thread ou thread principal
  15. var request = new XMLHttpRequest(); request.open('GET', 'https:!//swapi.co/api/people/1/'); request.onload = function()

    { !// add event handler if (request.status !== 200) { console.log(JSON.parse(request.response)); } else { console.log('error:', request.statusText); } }; request.onerror = function() { !// add event handler console.log('request error'); } request.send(); !// add request to task queue console.log('finish script');
  16. var request = new XMLHttpRequest(); request.open('GET', 'https:!//swapi.co/api/people/1/'); request.onload = function()

    { !// add event handler if (request.status !== 200) { console.log(JSON.parse(request.response)); } else { console.log('error:', request.statusText); } }; request.onerror = function() { !// add event handler console.log('request error'); } request.send(); !// add request to task queue console.log('finish script');
  17. var request = new XMLHttpRequest(); request.open('GET', 'https:!//swapi.co/api/people/1/'); request.onload = function()

    { !// add event handler if (request.status !== 200) { console.log(JSON.parse(request.response)); } else { console.log('error:', request.statusText); } }; request.onerror = function() { !// add event handler console.log('request error'); } request.send(); !// add request to task queue console.log('finish script');
  18. var request = new XMLHttpRequest(); request.open('GET', 'https:!//swapi.co/api/people/1/'); request.onload = function()

    { !// add event handler if (request.status !== 200) { console.log(JSON.parse(request.response)); } else { console.log('error:', request.statusText); } }; request.onerror = function() { !// add event handler console.log('request error'); } request.send(); !// add request to task queue console.log('finish script');
  19. ao utilizar um objeto XMLHttpRequest deve- se chamar explicitamente o

    método send() para adicionar a requisição na fila de tarefas
  20. callbacks
 
 sempre quando uma tarefa assíncrona entra em ação,

    o callback é registrado e espera por uma mensagem para ser executado
  21. callbacks
 
 as funções de callback que possuem acesso às

    variáveis do escopo em que foram definidas são chamadas de closures
  22. !// callback example
 
 console.log('Before setTimeout'); !// [1] setTimeout(() !=>

    { console.log('Callback added to the task queue executed!’); !// [3] }, 1000); !// after 1s the callback is added to the task queue console.log('After setTimeout'); !// [2]
  23. !// callback example (2)
 
 console.log('Before setTimeout'); !// [1] setTimeout(()

    !=> { console.log('Callback added to the task queue executed!’); !// [?] }, 0); console.log('After setTimeout'); !// [?]
  24. !// promise (result of a request using fetch) const req

    = fetch('https:!//httpbin.org/delay/3'); console.log(req); 
 
 !// Promise {status: "pending", value: undefined}
  25. !// using then to resolve a promise fetch('https:!//httpbin.org/ip') .then(response !=>

    response.json()) .then(result !=> console.log(result));
 !// {origin: "187.182.22.229, 187.182.22.229"}
  26. !// create a promise (resolved) const promise = new Promise(function

    (resolve, reject) { if (true) { resolve('This promise was resolved.'); } else { reject('This promise was rejected!'); } }); promise.then(result !=> console.log(result)); 
 !// This promise was resolved.
  27. !// creating a promise (rejected) const promise = new Promise(function

    (resolve, reject) { if (false) { resolve('This promise was resolved.'); } else { reject('This promise was rejected!'); } }); promise.then( result !=> console.log(result), error !=> console.error(error) ); !// This promise was rejected!
  28. / creating a promise (rejected) const promise = new Promise(function

    (resolve, reject) { if (false) { resolve('This promise was resolved.'); } else { reject('This promise was rejected!'); } }); promise .then(result !=> console.log(result)) .catch(error !=> console.error(error)); 
 !// This promise was rejected!
  29. !// notify when all promises were fulfilled (after 5s) Promise.all([

    fetch('https:!//httpbin.org/delay/5'), fetch('https:!//httpbin.org/delay/3'), ]).then(result !=> console.log('Ok!', result)); !// Ok! (2) [Response, Response]
  30. promises
 
 utiliza-se a função Promise.race() para retornar a primeira

    promise de uma lista que foi resolvida ou rejeitada
  31. async e await
 
 é uma forma mais moderna de

    se receber resultados de computação assíncrona
  32. !// using async and await async function getCharacter(id) { const

    res = await fetch(`https:!//swapi.co/api/people/${id}/`); const data = await res.json(); return data; } getCharacter(1) .then(luke !=> console.log(luke)); !// {name: "Luke Skywalker", height: "172", …}
  33. async e await
 
 a palavra-chave async é utiliza no

    início da função para indicar que ela será assíncrona
  34. async e await
 
 a palavra-chave await informa o código

    para esperar a promise ser resolvida antes de continuar a execução