Entendendo o uso de async/await com Promises no Javascript.

João Gabriel — Sun, 03 Mar 2024 16:31:51 +0000

Entendendo Promises em JavaScript

As Promises são um recurso fundamental em JavaScript para lidar com operações assíncronas, elas representam um valor que pode estar futuramente ou nunca (caso a promise retorne um erro). No contexto de desenvolvimento web, são frequentemente utilizadas para lidar com solicitações de rede, acesso a bancos de dados e outras operações que levam tempo para serem concluídas.

O que são Promises?

Em termos simples, uma Promise é um objeto que representa o sucesso ou a falha de uma operação assíncrona. Ela possui três estados possíveis:

Pendente: Estado inicial, quando a Promise está aguardando o resultado da operação.
Resolvida (Fulfilled): Quando a operação é concluída com sucesso.
Rejeitada (Rejected): Quando a operação falha.

Quando as Promises são utilizadas?

Promises são comumente utilizadas em situações em que uma operação assíncrona precisa ser realizada, como:

Requisições HTTP para recuperar dados de APIs.
Acesso a bancos de dados.
Leitura e escrita de arquivos.
Qualquer operação que envolva tempo de espera, como setTimeout.

Uso do async/await

O async/await é uma sintaxe introduzida no ECMAScript 2017 (também conhecido como ES8) para facilitar o trabalho com Promises. Ele permite escrever código assíncrono de forma mais síncrona, tornando-o mais legível e fácil de entender.

Antes do ES8 introduzir a sintaxe do async/await, as promises eram utilizadas através do método .then(), e os erros captados através do método .catch().

Exemplo de uso de uma Promise com async/await

// Função que retorna uma Promise que resolve após um certo tempo
function esperar(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Função assíncrona que utiliza o async/await
async function exemploAsyncAwait() {
  console.log('Iniciando operação assíncrona...');
  await esperar(2000); // Espera 2 segundos
  console.log('Operação assíncrona concluída!');
}

// Chamada da função assíncrona
exemploAsyncAwait();

Neste exemplo, a função esperar retorna uma Promise que resolve após o número especificado de milissegundos. A função exemploAsyncAwait utiliza o await para aguardar a conclusão da Promise retornada por esperar.

Conclusão

As Promises e o async/await são recursos poderosos que tornam o código assíncrono em JavaScript mais fácil de escrever e entender. Elas são essenciais em todo o desenvolvimento que envolva o JavaScript como linguagem de programação, podendo ser utilizadas em qualquer tipo de chamada assíncrona.

Principais métodos de array no Javascript (filter, map e reduce).

João Gabriel — Sat, 17 Feb 2024 18:38:01 +0000

O javascript é uma linguagem comumente utilizada por desenvolvedores independente de stack ou sênioridade, justamente pelo fato de ser muito flexível e principalmente por ser uma linguagem que funciona nativamente em todos os navegadores.

Como toda linguagem de programação, javascript possui Arrays que, no JS, podem armazenar dados de diferentes dataTypes. Embora não seja um dos dataTypes primitivos, o Array é um Object como qualquer outro, mas que herda alguns métodos e propriedades do Array.prototype, nesse post você verá sobre alguns dos métodos comumente utilizados em Arrays:

.filter();
.map();
.reduce();

Método filter:

O método filter, como o próprio nome diz, serve para filtrar os dados presentes em um Array. O método recebe como parâmetro uma função de callback que é executada uma vez para cada elemento dentro do Array que foi chamado. O retorno do método é um novo Array com somente os itens que passaram no filtro, caso a função de callback retorne true o elemento é mantido no Array de retorno da função filter, por outro lado, caso a função de callback retorne false para o elemento em questão, ele é eliminado do Array de retorno da função filter.

Vamos ver no exemplo abaixo uma utilização do método filter na prática:

Repare que no exemplo acima foi passado como parâmetro do método uma Arrow Function que retorna true para elementos que sejam do tipo String e false para outros elementos, dessa maneira acabamos de aplicar um filtro em cima do array original para obter apenas os elementos do tipo String. Vale ressaltar que o método não altera o Array original, e retorna uma cópia filtrada do mesmo, como podemos ver no retorno abaixo do código.

Método map

O método map é utilizado como um loop dentre todos os elementos do Array, é um método muito semelhante ao forEach por exemplo, porém o map consegue retornar um novo Array, sem alterar o Array original (assim como o filter) com os novos elementos que retornarmos.

Como o método map retorna um novo Array, diferente do método forEach, é possível encadear outros métodos em cima do retorno do map.

O método também funciona através de uma função de callback passada como parâmetro que manipula os elementos do Array. Veja um exemplo abaixo:

No exemplo acima, todos os elementos da constante array foram multiplicados por 2 e o novo Array gerado pelo método map foi alocado na constante newArray, é possível observar os dois Arrays no final da execução, observe que o Array original não foi alterado.

Método reduce

O método reduce serve para reduzirmos todo um Array para um único número. Diferente dos outros métodos aqui citados, o método recebe dois parâmetros, o primeiro ainda é uma função de callback e o segundo é o valor inicial do retorno da função.

A função de callback do método reduce recebe dois parâmetros: o primeiro é um "acumulador" que contém o retorno dos elementos anteriores e o segundo é o atual elemento em que a função está no Array original, aqui vamos chamá-los de: accumulator e currentValue. O método retorna um número.

Veja um exemplo somando todos os números de um Array:

Repare que foi passado como segundo parâmetro do método o número 0, como dito acima, esse número é o valor inicial de retorno do método, caso esse número fosse 1 o retorno do método seria a soma que foi calculada + 1, já que o valor inicial começa em 1 e não 0. Para realizar a soma do Array, retornamos o accumulator + currentValue, dessa forma o accumulator do próximo elemento sempre será a soma de seus antecessores e quando chegar no fim do Array teremos a soma de todos os seus valores!

Conclusão

Chegamos no final do post e agora você tem conhecimento sobre alguns dos principais métodos do javascript! Esses métodos com certeza são os mais utilizados (além de métodos mais simples como push e pop) dentro da linguagem, seja qual for o problema que for enfrentar, é sempre bom saber como utilizar esses métodos que auxiliam na resolução de qualquer problema!

DEV Community: João Gabriel

Entendendo o uso de async/await com Promises no Javascript.

Entendendo Promises em JavaScript

O que são Promises?

Quando as Promises são utilizadas?

Uso do async/await

Exemplo de uso de uma Promise com async/await

Conclusão

Principais métodos de array no Javascript (filter, map e reduce).

Método filter:

Método map

Método reduce

Conclusão