JAVASCRIPT - Funções assíncronas<a href="function_async.html" target="_blank" title="Pressione aqui para expandir este documento em nova aba."

1. INDEX

Introdução
Descrição.
Exemplos
Referências.
Histórico.

2. CONTEÚDO

Introdução
1. Objetivo:
  1. Promise é um objeto usado para processamento assíncrono. Um Promise (de "promessa") representa um valor que pode estar disponível agora, no futuro ou nunca.
  2. As promessas nos fornecem uma maneira mais fácil de lidar com a assincronia em nosso código de maneira sequencial.
  3. [🔙]
2. Pre-requisitos:
  1. Conhecimento da linguagem html..
  2. Conhecimento de funções javascript..
  3. Callback function.
    1. Usando_promises.
  4. [🔙]
3. Benefícios:
  1. A nova adição com ES2017 (ES8), adicionou na linguagem javascript as funções Async/await com objetivo de nos ajudar a escrever código de aparência completamente síncrona, enquanto realizamos tarefas assíncronas nos bastidores.
  2. [🔙]
Descrição
1. Uma Promise representa um proxy para um valor que não é necessariamente conhecido quando a promessa é criada. Isso permite a associação de métodos de tratamento para eventos da ação assíncrona num caso eventual de sucesso ou de falha. Isto permite que métodos assíncronos retornem valores como métodos síncronos: ao invés do valor final, o método assíncrono retorna uma promessa ao valor em algum momento no futuro.
  1. Um Promise está em um destes estados:
    1. pending (pendente): Estado inicial, que não foi realizada nem rejeitada.
    2. fulfilled (realizada): sucesso na operação.
    3. rejected (rejeitado): falha na operação.
2. Uma promessa pendente pode se tornar realizada com um valor ou rejeitada por um motivo (erro). Quando um desses estados ocorre, o método then do Promise é chamado, e ele chama o método de tratamento associado ao estado (rejected ou resolved). Se a promessa foi realizada ou rejeitada quando o método de tratamento correspondente for associado, o método será chamado, deste forma não há uma condição de competição entre uma operação assíncrona e seus manipuladores que estão sendo associados.
3. Como os métodos Promise.prototype.then e Promise.prototype.catch retornam promises, eles podem ser encadeados — uma operação chamada composição.
4. [🔙]

Exemplos.

Promise:

Exemplos de uso das palavras reservadas Async/await.

Exemplo de funções assíncronas.

No exemplo a seguir, primeiro declaramos uma função que retorna uma promessa que resolve para um valor após 2 segundos. Em seguida, declaramos um assíncrono função e aguardam para que a promessa seja resolvida antes de registrar a mensagem no console:

Código JavaScript

      /**
         * test_function_async_1.js
         * 
      */
      function palhaço_assustador() {
         return new Promise(
                        resolve => {setTimeout(() => { resolve('🤡');}, 2000);});
      }

      async function msg() {
         const msg = await palhaço_assustador();
         console.log('Message:', msg);
      }

      msg(); // Message: 🤡 <-- after 2 sec

Nota: await é um novo operador usado para esperar por uma promessa para resolver ou rejeitar. Só pode ser usado dentro de uma função assíncrona..

O poder das funções assíncronas se torna mais evidente quando há várias etapas envolvidas:

Código JavaScript


   /**
    * Exemplo de function assíncrona
      * test_function_async_2.js
      * O poder das funções assíncronas se torna mais evidente quando 
      * há várias etapas envolvidas.
      */            
   function who() {
      return new Promise(
         resolve => {setTimeout(() => {resolve('🤡');}, 200);});
   }

   function what() {
      return new Promise(
         resolve => {setTimeout(() => {resolve('espiona');}, 300);});
   }

   function where() {
      return new Promise(
         resolve => {setTimeout(() => {resolve('nas sombras');}, 500)});
   }

   async function msg() {
      const a = await who();
      const b = await what();
      const c = await where();

      console.log(`${ a } ${ b } ${ c }`);
   }

   msg(); // 🤡 espiona nas sombras <- após 1 segundo

Uma palavra de cautela, no entanto, no exemplo acima, cada etapa é realizada sequencialmente, com cada etapa adicional aguardando a etapa anterior para ser resolvida ou rejeitada antes de continuar. Se você quiser que as etapas ocorram em paralelo, você pode simplesmente usar Promise.all esperar que todas as promessas tenham sido cumpridas:
1. Código JavaScript:
```
   async function msg() {
      const [a, b, c] = await Promise.all([who(), what(), where()]);

      console.log(`${ a } ${ b } ${ c }`);
   }

   msg(); // 🤡 espiona nas sombras <- após 500ms
```
2. Promise.all retorna uma matriz com os valores resolvidos assim que todas as promessas passadas forem resolvidas.
3. Acima, também usamos uma boa desestruturação de array para tornar nosso código sucinto.

[🔙]

Promessa de retorno.

As funções assíncronas sempre retornam uma promessa, portanto, o seguinte pode não produzir o resultado que você deseja:

Código JavaScript:


   async function hello() {
   return 'Hello Alligator!';
   }

   const b = hello();

   console.log(b); // [object Promise] { ... }

Como o que é retornado acima é uma promessa, é necessário usar o método b.then para imprimir o resultado da função hello() e não a promessa.

Código JavaScript.


      async function hello() {
      return 'Hello Alligator!';
      }

      const b = hello();

      b.then(x => console.log(x)); // Hello Alligator!

[🔙]

Expressão de função assíncrona

O exemplo abaixo é a função assíncrona do nosso primeiro exemplo, mas definida como uma expressão de função:

Código JavaScript:


      function palhaço_assustador() {
         return new Promise(
                     resolve => {setTimeout(() => { resolve('🤡');}, 2000);});
      }
      const msg = async function() {  
                        const msg = await palhaço_assustador();
                        console.log('Message:', msg);
                     }

      console.log(msg().then);

Arrow function - async assíncrona

Aqui está o mesmo exemplo mais uma vez, mas desta vez definido como uma função de seta:

Código JavaScript:


      function palhaço_assustador() {
         return new Promise(
                     resolve => {setTimeout(() => { resolve('🤡');}, 2000);});
      }
      const msg = async () => {  
                        const msg = await palhaço_assustador();
                        console.log('Message:', msg);
                     }

      console.log(msg().then);

[🔙]

REFERÊNCIAS
HISTÓRICO
1. 16/02/2021
  - Criar este documento baseado no function_async.md ;
  - Escrever tópico Objetivos;
  - Escrever tópico Pre-requisitos;
  - Escrever tópico Benefícios;
  - Escrever tópico Descrição;
  - Escrever tópico Exemplos;
  - Escrever tópico Referências
  - [🔙]
2. 17/02/2021
  - Ler este documento para checar os erros de português.