JavaScript 101 — Async/Await

A pedido do Rosário Pereira Fernandes hoje trago o tema Async/Await.

No post anterior falei sobre o Assíncrono e síncrono [Link] com base nos conhecimentos do post anterior podemos falar um bocado sobre este tópico.

Mas para podermos falar sobre async/await primeiro terei que explicar certos conceitos que são callbacks e promises.

Callbacks

Um callback é uma função que deve ser executada após a conclusão de outra função daí o nome “callback”, a tempos atrás era muito usado para fazer gerenciamento de assincronia.

Exemplo uma Rotina da manhã de uma pessoa pode seguir os seguintes steps.

//Rotina da manhã
function wakeUp(){
  console.log("Acordar");
}
function workout(){
  console.log("exercitar");
}
function takeBath(){
  console.log("Tomar Banho");
}
function haveBreakFast(){
  console.log("Nham Nham Nham");
}
wakeUp();
workout();
takeBath();
haveBreakFast();
output:
// Acordar
// Exercitar
// Tomar Banho
// Nham Nham Nham

Neste primeiro exemplo está “tudo bem” mas quando chegamos a fase onde temos funções sequenciais onde uma depende da resposta de outra(s) funções começamos a ter certos problemas, como gerenciamento do código, entre outras.

Exemplo: existem Pessoas que para workout() primeiro tem seu BreakFast() então seguindo esse ponto de vista, neste caso teríamos que esperar que a pessoas nos confirmasse se teve o seu Breakfast() antes de efectuar outra tarefa.

function wakeUp(){
  console.log("Acordar");
}
function workout(){
  setTimeout(function(){
    console.log("exercitar");},5000);
}
function takeBath(){
  console.log("Tomar Banho");
}
function haveBreakFast(){
  console.log("Nham Nham  Nham");
}
wakeUp();
workout();
takeBath();
haveBreakFast();
output:
// Acordar
// Nham Nham Nham
// Tomar Banho
// Exercitar

Um dos problemas de callbacks.

Em funções sequenciais com dependência entre elas torna-se complicado gerir entender o código muitas vezes criando “callback hell” e por vezes código poderá executar sem nenhuma confirmação do resultado da chamada anterior.

Promises

Promise veio para poder resolver certos problemas encontrados nos callbacks. Por definição promise é um Objecto que pode retornar um valor no futuro: um valor resolvido (sucesso) ou um valor não resolvido (erro), podendo realizar tarefa consoante o resultado retornado.

Promise contém três estados: fulfilled, rejected or pending. Mas apenas usamos dois onde colocamos funções para manipular tipos de respostas “estados” que são : Fulfilled “resolve” e Rejected.

function takeBath(){
  return new Promise( function (resolve, reject) {
    resolve("Banho Tomado");
    reject("Agua Estava Gelada");
 })
}
takeBath()
.then(function(result){haveBreakfast();}) // Banho tomado com sucesso
.catch(function(error){console.log(error)}); // Erro

Async/Await

“Na Programação Async/Await é uma característica sintática que permite que uma função assíncrona seja estruturada de maneira similar a uma função síncrona comum.”

Podemos dizer que o “Async/Await ” mais uma forma de poder gerenciar estruturas como “Promises”, e o seu objectivo é dar espaço ou oportunidade para o programa executar outras funções enquanto aguarda a conclusão de uma tarefa assíncrona de longa execução. Exemplo: requests em API’s.

async function takeBath(){ //do something}
async function workout(){ //do Something}
async function goWork(){ //Do Something}
async function doAll(){
var bathResult = await takeBath();
var workoutResult = await workout(bathResult);
var endResult = await goWork(workoutResult);
return endResult;
}
doAll().then (function (result) => { console.log(result);})
.catch((error) => { console.log(error);});

Um dos maiores beneficios:

• Evita sobrecarga na execucao do codigo.
• Melhor leitura e entendimento do código pelos devs.
• Aumenta perfomance e capacidade de resposta melhorando user experience.

Exemplo 1 “comparação de código”:

// Async/Await
async function helloAsync() {
  return "hello";
}
// Promises 
function helloAsync() {
  return new Promise(function (resolve) {
    resolve("hello");
  });
}
// Callback 
function helloAsync(){
 function doSomething(){ 
   function doSomethingElse() {}
  }
}

Exemplo 2 “comparação de código”:

// Async/Await 
async function multiply(a, b) {
  return a * b;
}
async function foo() {
  var result = await multiply(2, 5);
  return result;
}
// Erros serão tratados aqui
(async function () {
    var result = await foo();
    console.log(result); 
})();
//Promises
function multiply(a, b) {
  return new Promise(function (resolve) {
    resolve(a * b);
  });
}
function foo() {
  return new Promise(function(resolve) {
    multiply(2, 5).then(function(result) {
      resolve(result);
    });
  );
}
// Erros serão tratados aqui
new Promisefunction() {
  foo()
    .then(function(result) {console.log(result);})
    .catch(error){console.log(error)};
});

Por hoje e tudo espero que tenha sido util o post.

Sintam-se livre para comentar , sugerir correções “ melhores exemplos”, dicas para proximo tópico.

Thank You até a próxima.

facebook: Jose Pedro Dava

twitter: @josepedrodava