Como trabalhar com Async / Await e entendendo Promises.

Entenda como trabalhar com Async/Await

Promises

Antes de falar sobre async / await é preciso entender Promises.

Promises JavaScript. Promise, ou Promessa, é um objeto usado para processamento assíncrono.
Uma Promise representa um valor que pode estar disponível agora, no futuro ou nunca.
Usando uma Promise, é assegurado que a API não será processada nem formatada até que a chamada da API seja bem sucedida.

Estados de uma Promise :

• pending (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.

Função assíncrona com Promises.

const fetch = require('node-fetch')

function getPerson(id){
	fetch(`http://swapi.co/api/people/${id}`)
		.then(response => response.json())
		.then(person => console.log(person.name))
}

getPerson(1) //Luke Skywalker

NOTA:

As funções resolve e reject, quando chamadas, resolvem (em caso de sucesso)ou rejeitam (quando ocorre um erro)a promessa, respectivamente. O executor começa o trabalho assíncrono que, quando concluído, chama uma das funções resolve ou reject para definir o estado da promessa.

Referência: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise

Async

A declaração async function define uma função assíncrona, que retorna um objeto AsyncFunction, em JavaScript a função assíncrona é por definição um objeto do tipo AsyncFunction.

Para se obter melhor eficiência é recomendado que a função seja declarada com o async, ou seja, com a expression async functions chamado no código, desta forma as funções são tratadas com o resto do código, pois o mesmo sendo criado através do construtor AsyncFunction as funções são tratados na criada, perdendo eficiência.

Exemplo 1 : Declarando uma função async apartir da expression async functions.

async function newFunction("/*... Parametros */") {
    /*... Declarações ... */
}

Exemplo 2 : Declarando uma função async através do construtor de uma AsyncFuntion

let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor

let newFunction = new AsyncFunction(/*Aqui é aplicado todo escopo da função, parâmetros, declarações, retorno.*/)

newFunction('/* Parâmetros */').then(v => {
  console.log(v); // imprime o resultado.
})

• Observamos Claramente que o Exemplo 1 não só é mais prático, como é é simples e de aplicar e entendimento.

NOTA:

Uma função assíncrona pode conter uma expressão await, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retorna o valor resolvido.

Referência: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/async_function

Await

O operador await é utilizado para esperar por uma Promise . Ele pode ser usado apenas dentro de um escopo async function.

A expressão await, como o próprio nome diz “Aguardando”, ou seja, enquanto o processo não obtiver retorno a função async fica em pausa, esperando o retorno da Promise, se a Promise for rejeitada a expressão await executa uma Exception com o valor da Rejeição.

Exemplo:

async function newFunction() {
	try{
		return await Promisefunction('/* parametros */')
	}catch(e){
		return e
	}
}
console.log(newFunction())

NOTA:

Se o valor não for uma Promise, ele converte o valor para uma Promise resolvida,  e espera por ele.

Referência: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/await

Exemplo 1: Escrevendo uma função assíncrona com async/await

const fetch = require('node-fetch')

function getPerson(id){
	const response = await fetch(`http://swapi.co/api/people/${id}`)
	const person = await response.json()
	console.log(person.name)
}

getPerson(1) //Luke Skywalker

• Note que no exemplo acima existe duas expressões await, neste caso quando a primeira esta em execução a função entra em pausa aguardando o retorno da promise, assim que recebe o retorno a função sai da pausa passando para a próxima linha de execução, entrando novamente em pausa e assim poder finalizar todo o processo.

Exemplo 2: Com Arrow Function

const fetch = require('node-fetch')

function getPerson(id){
	const response = await fetch(`http://swapi.co/api/people/${id}`)
	return await response.json()
}

getPerson(1)
	.then(person => console.log(person.name) //Luke Skywalker

• Neste exemplo temos o mesmo processo do exemplo anterior, mais desta vez utilizando Arrow functions, também podemos notar a notação do then, isto só é possível porque o retorno é uma Promise.

Exemplo 3: Utilizando Promise.all, Arrow function, Map

const fetch = require('node-fetch')
const ids = [1, 2, 3, 4, 5]
let person = []

function getPerson(id){
	const response = await fetch(`http://swapi.co/api/people/${id}`)
	const person = await response.json()	
	return person.name
}

function getData(){
	person.push(Promise.all(ids.map(item => getPerson(item)))
	return person[0]
}

async function result (){
	console.log(await getData())
}

result()
	/*[ 'Luke Skywalker',
		'C-3PO',
		'R2-D2',
		'Dart Vader',
		'LEia Organa' ] */

Para finalizar Deixo este código para Reflexão, Abraço e até o Próximo Post!