{"id":36774,"date":"2019-10-31T22:13:44","date_gmt":"2019-10-31T19:13:44","guid":{"rendered":"https:\/\/prohoster.info\/blog\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs\/"},"modified":"2019-10-31T22:13:44","modified_gmt":"2019-10-31T19:13:44","slug":"asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","status":"publish","type":"post","link":"https:\/\/prohoster.info\/pt\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Programa\u00e7\u00e3o ass\u00edncrona em JavaScript. (Callback, Promise, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ol\u00e1 a todos. Aqui \u00e9 o Sergey Omelnytsky. N\u00e3o faz muito tempo, fiz uma transmiss\u00e3o ao vivo sobre programa\u00e7\u00e3o reativa, onde falei sobre assincronidade em JavaScript. Hoje, gostaria de resumir esse material. <\/p>\n

<\/p>\n

\"Programa\u00e7\u00e3o<\/p>\n

<\/p>\n

Mas antes de come\u00e7armos o conte\u00fado principal, precisamos fazer uma introdu\u00e7\u00e3o. Ent\u00e3o, vamos come\u00e7ar com defini\u00e7\u00f5es: o que s\u00e3o pilha e fila?
\nPilha <\/strong>\u2014 \u00e9 uma cole\u00e7\u00e3o cujos elementos s\u00e3o obtidos segundo o princ\u00edpio \"\u00faltimo a entrar, primeiro a sair\" (LIFO).
\nFila <\/strong>\u2014 \u00e9 uma cole\u00e7\u00e3o cujos elementos s\u00e3o obtidos segundo o princ\u00edpio \"primeiro a entrar, primeiro a sair\" (FIFO).<\/p>\n

<\/p>\n

Ok, vamos continuar. <\/p>\n

<\/p>\n

\"Programa\u00e7\u00e3o<\/p>\n

<\/p>\n

JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o de thread \u00fanica. Isso significa que h\u00e1 apenas uma thread de execu\u00e7\u00e3o e uma pilha, na qual as fun\u00e7\u00f5es s\u00e3o colocadas em espera para serem executadas. Portanto, em um determinado momento, JavaScript s\u00f3 pode executar uma opera\u00e7\u00e3o; outras opera\u00e7\u00f5es ficar\u00e3o aguardando sua vez na pilha at\u00e9 serem chamadas. <\/p>\n

<\/a><\/noindex><\/p>\n

Pilha de chamadas<\/strong> \u2014 \u00e9 uma estrutura de dados que, de forma simplificada, grava informa\u00e7\u00f5es sobre onde estamos no programa. Se entramos em uma fun\u00e7\u00e3o, colocamos uma entrada sobre ela na parte superior da pilha. Quando retornamos de uma fun\u00e7\u00e3o, removemos o elemento do topo da pilha e voltamos ao ponto de onde chamamos essa fun\u00e7\u00e3o. Isso \u00e9 tudo o que a pilha faz. Agora, surge uma pergunta muito interessante. Como, ent\u00e3o, a assincronidade funciona em JavaScript?<\/p>\n

<\/p>\n

\"Programa\u00e7\u00e3o<\/p>\n

<\/p>\n

Na verdade, al\u00e9m da pilha, os navegadores t\u00eam uma fila especial para trabalhar com o chamado WebAPI. As fun\u00e7\u00f5es dessa fila ser\u00e3o executadas em ordem apenas depois que a pilha estiver completamente limpa. Somente ap\u00f3s isso, elas s\u00e3o transferidas da fila para a pilha para execu\u00e7\u00e3o. Se houver pelo menos um elemento na pilha, elas n\u00e3o poder\u00e3o entrar na pilha. \u00c9 exatamente por isso que a chamada de fun\u00e7\u00f5es de timeout muitas vezes n\u00e3o \u00e9 precisa em termos de tempo, j\u00e1 que a fun\u00e7\u00e3o n\u00e3o pode ir da fila para a pilha enquanto esta estiver cheia. <\/p>\n

<\/p>\n

Vamos considerar o seguinte exemplo e analis\u00e1-lo passo a passo. Tamb\u00e9m veremos o que est\u00e1 acontecendo no sistema durante isso.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
1) Enquanto nada acontece. O console do navegador est\u00e1 limpo, a pilha de chamadas est\u00e1 vazia.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
2) Em seguida, o comando console.log(\u2018Hi\u2019) \u00e9 adicionado \u00e0 pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
3) E ela \u00e9 executada<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
4) Depois, console.log(\u2018Hi\u2019) \u00e9 removido da pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
5) Agora passamos para o comando setTimeout(function cb1() {\u2026 }). Ele \u00e9 adicionado \u00e0 pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
6) O comando setTimeout(function cb1() {\u2026 }) \u00e9 executado. O navegador cria um temporizador, que \u00e9 parte da API Web. Ele come\u00e7ar\u00e1 a contagem regressiva.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
7) O comando setTimeout(function cb1() {\u2026 }) terminou e \u00e9 removido da pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
8) O comando console.log(\u2018Bye\u2019) \u00e9 adicionado \u00e0 pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
9) O comando console.log(\u2018Bye\u2019) \u00e9 executado.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
10) O comando console.log(\u2018Bye\u2019) \u00e9 removido da pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
11) Depois que pelo menos 5000 ms passarem, o temporizador termina e coloca o callback cb1 na fila de callbacks.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
12) O loop de eventos pega a fun\u00e7\u00e3o cb1 da fila de callbacks e a coloca na pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
13) A fun\u00e7\u00e3o cb1 \u00e9 executada e adiciona console.log(\u2018cb1\u2019) \u00e0 pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
14) O comando console.log(\u2018cb1\u2019) \u00e9 executado.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
15) O comando console.log(\u2018cb1\u2019) \u00e9 removido da pilha de chamadas.<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
16) A fun\u00e7\u00e3o cb1 \u00e9 removida da pilha de chamadas.<\/p>\n
<\/p>\n
Vamos olhar para um exemplo em a\u00e7\u00e3o:<\/p>\n
<\/p>\n
\"Programa\u00e7\u00e3o<\/p>\n
<\/p>\n
E assim, examinamos como a ass\u00edncronicidade \u00e9 implementada em JavaScript. Agora, vamos falar brevemente sobre a evolu\u00e7\u00e3o do c\u00f3digo ass\u00edncrono.<\/p>\n
<\/p>\n
Evolu\u00e7\u00e3o do c\u00f3digo ass\u00edncrono.<\/h2>\n
<\/p>\n
a(function (resultsFromA) {\n    b(resultsFromA, function (resultsFromB) {\n        c(resultsFromB, function (resultsFromC) {\n            d(resultsFromC, function (resultsFromD) {\n                e(resultsFromD, function (resultsFromE) {\n                    f(resultsFromE, function (resultsFromF) {\n                        console.log(resultsFromF);\n                    })\n                })\n            })\n        })\n    })\n});<\/code><\/pre>\n
<\/p>\n
A programa\u00e7\u00e3o ass\u00edncrona, como conhecemos em JavaScript, pode ser implementada apenas com fun\u00e7\u00f5es. Elas podem ser passadas como qualquer outra vari\u00e1vel para outras fun\u00e7\u00f5es. Assim, nasceram os callbacks. E isso \u00e9 legal, divertido e emocionante, at\u00e9 que se transforma em tristeza e desespero. Por qu\u00ea? \u00c9 simples:<\/p>\n
<\/p>\n