Skip to content

Latest commit

 

History

History
134 lines (90 loc) · 3.11 KB

promises.mdx

File metadata and controls

134 lines (90 loc) · 3.11 KB

export { future as theme } from 'mdx-deck/themes'

import { Split } from 'mdx-deck/layouts'

import { Appear, Notes } from 'mdx-deck'

import { CodeSurfer } from 'mdx-deck-code-surfer'

Promises

JS é single thread

Na mesma thread que seu código javascript roda, tem muito mais coisa acontecendo

  • Painting
  • Atualização de styles da página
  • Manipulação de interação do usuário
  • (Meu código)
A execução do nosso código fica o tempo todo em concorrência com processos do próprio navegador.

Interações como seleção de texto, ou interações com form controls, etc, rodam tudo na mesma thread.

Antes de um método ser executado ele entra numa fila, e só será executado quando chegar sua vez na fila.

O browser fica infinitamente atualizando a fila com novas mensagens. Esse processo se chama event loop,

Event loop

No conceito de event loop, métodos são frequentemente chamados de mensagens (messages).

O problema

Com esse modelo de concorrência, fica impossível a execução de código assíncrono

Por que toda mensagem tem que esperar a próxima pra iniciar a execução

A solução

Promises

<CodeSurfer title="Exemplo" code={require("raw-loader!./snippets/promises/promise.jsx")} />

<CodeSurfer title="Promise.all" code={require("raw-loader!./snippets/promises/promiseAll.jsx")} />

<CodeSurfer title="Promise.race" code={require("raw-loader!./snippets/promises/promiseRace.jsx")} />

Outros métodos

  • Promise.reject(reason)
  • Promise.resolve(reason)
Retorna uma promise já resolved ou rejected

<CodeSurfer title="Under the hood" code={require("raw-loader!./snippets/promises/hardcodedpromise.jsx")} steps={[ { lines: [1] }, { range: [2, 4], notes: "Flags" }, { range: [6, 14], notes: "Métodos que atualizam as flags" }, { range: [16, 34], notes: "Método que fica continuamente checando o estado da Promise" }, { range: [18, 26] }, { range: [26, 30] }, { range: [30, 32] }, { range: [36, 57], notes: "Retorno" }, { lines: [37], notes: "Executando callback que foi passada" }, { range: [40, 50], notes: "Retornando handler de sucesso com nova Promise"}, { range: [52, 55], notes: "Retornando handler de erro" } ]} />

<CodeSurfer title="Quiz" code={require("raw-loader!./snippets/promises/quiz.jsx")} />

Resposta:

  • 1, 2, p1, p2

Referências