O documento discute conceitos de assincronismo em JavaScript, como funções assíncronas, callbacks, promises e async/await. É explicado que o JavaScript é executado de forma assíncrona através de um event loop que agenda tarefas. Funções assíncronas como eventos, timers e callbacks são discutidas, assim como problemas com callbacks hell. Promessas e seu uso para processamento assíncrono são apresentadas, incluindo seus estados. Por fim, async e await são introduzidos como uma forma mais limpa de lidar com assincronismo.

1. Trabalhando de forma
assíncrona com
javascript

2. hello!
Lucas Anderson Lima
Desenvolvedor Front End na Wooza
23 anos de idade - Baiano
2
@LuAnderson

3. “
Tudo é executado em paralelo,
exceto o seu código.
3
Mikito Takada

4. JavaScript
4
1.
Beginners

5. Síncrona x Assíncrona
5

6. Síncrona x Assíncrona
6
É sequencial, logo segue a
ordem em que as instruções
aparecem no código fonte do
programa.
Você tende a esperar o final
de uma execução para iniciar
outra.

7. Síncrona x Assíncrona
7
Tarefas que poderão ser
executadas sem interferir no
fluxo principal de execução do
código.
Você pode disparar uma série
dessas tarefas sem precisar
esperar que cada uma se
complete para prosseguir.
É sequencial, logo segue a
ordem em que as instruções
aparecem no código fonte do
programa.
Você tende a esperar o final
de uma execução para iniciar
outra.

8. Síncrona
8

9. Síncrona
9
Assíncrona

10. Funções Assíncrona
10

11. Funções Assíncrona
11
● Eventos do DOM

12. Funções Assíncrona
12
● Eventos do DOM
● Timers

13. Funções Assíncrona
13
● Eventos do DOM
● Timers
● Mutation Observers

14. Funções Assíncrona
14
● Eventos do DOM
● Timers
● Mutation Observers
● Callbacks e closures

15. Funções Assíncrona
15
● Eventos do DOM
● Timers
● Mutation Observers
● Callbacks e closures
● Promise

16. Entendendo a engine JS
16
“O próprio JavaScript nunca teve nenhuma noção direta de
assincronia embutida nele.”

17. Entendendo a engine JS
17
● Ambiente de Hospedagem (Navegador ou NodeJS);
“O próprio JavaScript nunca teve nenhuma noção direta de
assincronia embutida nele.”

18. Entendendo a engine JS
18
● Ambiente de Hospedagem (Navegador ou NodeJS);
● Cada dispositivo uma hospedagem diferente;
“O próprio JavaScript nunca teve nenhuma noção direta de
assincronia embutida nele.”

19. Entendendo a engine JS
19
● Ambiente de Hospedagem (Navegador ou NodeJS);
● Cada dispositivo uma hospedagem diferente;
● Denominador comum é chamado de Event Loop.
“O próprio JavaScript nunca teve nenhuma noção direta de
assincronia embutida nele.”

20. Entendendo a engine JS
20
● Ambiente de Hospedagem (Navegador ou NodeJS);
● Cada dispositivo uma hospedagem diferente;
● Denominador comum é chamado de Event Loop.
“O próprio JavaScript nunca teve nenhuma noção direta de
assincronia embutida nele.”

21. Event Loop
21
2.
Entendo melhor o funcionamento do JS

22. O que faz o Event Loop?
22
● Lida com a execução de vários fragmentos de seu programa ao
longo do tempo;
(Engine JS)

23. O que faz o Event Loop?
23
● Lida com a execução de vários fragmentos de seu programa ao
longo do tempo;
● ‘É uma agenda os eventos’;
(Engine JS)

24. O que faz o Event Loop?
24
● Lida com a execução de vários fragmentos de seu programa ao
longo do tempo;
● ‘É uma agenda os eventos’;
● Monitora a pilha e a chamada e a fila de retorno.
(Engine JS)

25. Analisando ‘tick’ no event loop
25

26. Analisando ‘tick’ no event loop
26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

43. 43

44. Callbacks
44
3.
É o padrão assíncrono mais fundamental na linguagem JS

45. Callbacks
45

46. Callbacks
46

47. Callbacks
47

48. Callbacks + Condicionais
48

49. Callbacks Hell
49

50. 50

51. Promise
51
4.
Objeto usado para Processamento Assíncrono

52. Promises
52
Representa um valor que pode estar disponível agora, no futuro ou
nunca;

53. Promises
53
Representa um valor que pode estar disponível agora, no futuro ou
nunca;

54. Promises - Estados
54

55. Promises - Estados
● Pedding (Pendente): Estado inicial, que não foi realizada nem rejeitada.
55

56. Promises - Estados
● Pedding (Pendente): Estado inicial, que não foi realizada nem rejeitada.
● Fulfilled (Realizada): Sucesso na operação.
56

57. Promises - Estados
● Pedding (Pendente): Estado inicial, que não foi realizada nem rejeitada.
● Fulfilled (Realizada): Sucesso na operação.
● Rejected (Rejeitado): Falha na operação.
57

58. Promises - Estados
● Pedding (Pendente): Estado inicial, que não foi realizada nem rejeitada.
● Fulfilled (Realizada): Sucesso na operação.
● Rejected (Rejeitado): Falha na operação.
● Settled (Estabelecida): Que foi realizada ou rejeitada.
58

59. 59
Promises - Principais Funções

60. Resolve
Retorna um objeto
‘Promise’ que foi
resolvido com um dado
valor.
60
Promises - Principais Funções

61. Resolve
Retorna um objeto
‘Promise’ que foi
resolvido com um dado
valor.
Reject
Retorna um objeto que
foi rejeitado.
61
Promises - Principais Funções

62. Resolve
Retorna um objeto
‘Promise’ que foi
resolvido com um dado
valor.
Reject
Retorna um objeto que
foi rejeitado.
Catch
Adiciona um callback
que trata rejeição para
a promise.
62
Promises - Principais Funções

63. ES8
63
5.
Async / Await

64. Async
64

65. Async
65

66. Async
66
● É utilizado para declarar que uma função é async

67. Async
67
● É utilizado para declarar que uma função é async
● AsyncFunction object trabalha da mesma forma que uma Promise

68. Async
68
● É utilizado para declarar que uma função é async
● AsyncFunction object trabalha da mesma forma que uma Promise
● Callbacks | Resolves e Reject --- await

69. Await
69

70. Await
70
A expressão await faz a execução de uma função async pausar, aguardando o
retorno da Promise.

71. Await
71
A expressão await faz a execução de uma função async pausar, aguardando o
retorno da Promise.
Ela pode ser usado apenas dentro de uma async function.

72. Async/Await
72

73. 73

74. Limpeza de código: Callback x Async
74

75. Limpeza de código: Callback x Async
75
Callback

76. Limpeza de código: Callback x Async
76
Callback
Async

77. Manipulação de Erros: Promises x Async
77

78. 78
Manipulação de Erros: Promises x Async

79. 79
Manipulação de Erros: Promises x Async

80. Await: Suporte

81. 81
Callback
Promise
Async/Await

82. 82
Tecnicamente, não há um jeito “errado”;
Use cada abordagem da maneira certa, para o problema certo
e seja assincronamente feliz!

83. Links
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/await
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/funcoes_assincronas
https://braziljs.org/blog/promises-no-javascript/
83

84. @LuAnderson
Perguntas?
84