Aula 03
O Valor Retornado Pela Função Async no JavaScript
Summary
Resumo da Aula sobre SYNC O8
Nesta aula, aprendemos sobre a palavra-chave async
e seu impacto no retorno de funções em JavaScript.
Estrutura da Aula
-
Introdução à Função
obterDados
:- Criamos uma função chamada
obterDados
que retorna uma lista de três objetos, cada um com uma propriedadeID
.
- Criamos uma função chamada
-
Adicionando
async
:- Modificamos a função para
async obterDadosDois
. - Ao chamar
obterDados
, em vez de retornar os objetos diretamente, foi retornada uma promessa.
- Modificamos a função para
-
Manuseio de Promessas:
- Para acessar os dados da promessa, podemos usar:
- O método
.then()
para manipulação assíncrona. - O
await
, que deve estar dentro de uma função marcada comoasync
.
- O método
- Um exemplo foi fornecido de como retornar os dados de
obterDados
usandoawait
em uma nova função.
- Para acessar os dados da promessa, podemos usar:
-
Exemplo de Retorno:
- Ao modificar o retorno da função para incluir uma string, observou-se que ainda retornava uma promessa, demonstrando que o
async
sempre embrulha o retorno em uma promessa.
- Ao modificar o retorno da função para incluir uma string, observou-se que ainda retornava uma promessa, demonstrando que o
-
Revisão da Aula:
- O retorno de funções
async
é sempre encapsulado em promessas, que podem ser manipuladas usandothen
ouawait
. - Para o uso de
await
, é necessário estar dentro de uma funçãoasync
. - O bloco
try-catch
pode ser usado para tratar erros em funçõesasync
, oferecendo um método alternativo aothen
ecatch
.
- O retorno de funções
Conclusão
A aula forneceu uma introdução ao uso de async
e await
em JavaScript, destacando como elas simplificam o tratamento de operações assíncronas em comparação com o uso de promessas tradicionais. Esperamos que os alunos tenham gostado e estejam prontos para aplicar esses conceitos.
Video Transcript
Estamos de volta, vamos continuar aqui, aprender sobre SYNC O8.
Nesta aula a gente vai só, ah, uma olhada no que acontece quando a gente retona, valores
da função normal da função A5.
Deixa eu limpar aqui esse console aqui do Firefox.
Ah, então vamos fazer uma função, por exemplo, obter dados.
Essa função obter dados vai retornar uma lista de objetos dessa maneira aqui.
Não importa muito o que são, só vou adicionar três objetos.
Cada objeto é uma propriedade chamada ID.
Não vai importar muito, o que importa é que a gente vai aprender sobre o valor retornado.
Então dessa maneira se definir se obter dados, se chamar obter dados, que a gente espera que
vai ser retornado.
Corretamente a lista com os três objetos, faz sentido, não é?
Mas agora o que acontece se a gente adicionar a palavra chave A5 antes da função obter
dados?
Vamos transformar essa função obter dados, vamos chamar obter dados dois, certo?
Oter dados dois.
Vamos transformar essa função na função sincrona, A5.
Desculpa, dessa maneira aqui, vamos ver no que dá.
Está aí, definir a função nesse caso, com a palavra A5.
Agora vou chamar obter dados, esqueci de dois, desculpa, vamos obter dados mesmo, vai dessa
maneira mesmo.
Vou chamar, olha aí no que dá.
Para retornar, o valor retornado foi uma promessa, não foi o objeto.
Então esse é um detalhe da função A5, se você retornar alguma coisa aqui, algum
valor da função A5, esse valor aqui automaticamente vai ser embrulhado numa promessa, que vai
ser realizada na mesma hora nesse caso.
Você note que você dá um olhado no objeto promise, o estado vai ser fulfilled, realizada
e o valor vai ser aquela caladista dos três objetos.
Certo então, para poder realmente pegar esses caras, você tem que fazer um das maneiras
de fazer isso, usando aquele velho DEN, dados, aí faz o que quiser, consola o dados, por
exemplo.
Essa é uma maneira, ou você pode usar o await, obter dados, dessa maneira, mas neste
caso vai ter problema porque quando a gente está aqui no console, a gente não está
dentro de uma função de A5.
Então para poder usar o await, sempre tem que ter o quê?
Tem que estar dentro de uma função A5, então tem que dar o A5, vamos obter dados,
por exemplo, fazer outra função só para fazer o A5 aqui, para poder chamar o await.
Então você dá o await, só pode dar dentro da função A5.
Aí você põe os dados aqui dentro de uma variável, aí vamos dar o console log, aí
vamos chamar a função, porque aqui a gente só definiu, não executou.
Aí vamos obter dados, chamou e retornou aqui no console log, deu o console log aqui,
olha aqui, listo.
Certo?
Esse valor aqui que você está vendo aqui é o valor retornado, você está vendo essa
seta aqui, é porque a gente não retornou nada explicitamente, por isso que apareceu
um negócio aqui da promessa, mas se eu tivesse definido aqui, olha aqui, com return, sei lá,
um string A, olha no que dá.
Vamos chamar o await dados de novo, deixa eu...
A.
Cadê?
Vamos obter dados.
Cadê?
Não pegou.
Está novamente, é 5 points, vamos obter dados, deu o console log, deixa eu só comentar aqui,
para ver no que dá, retorno A.
Vamos obter dados.
Retornou a promessa, a gente quer dar um dedo aqui, valor, console log, valor, está retornando
lá, isso é.
Então, está funcionando mesmo, porque a gente não tinha explicitamente retornado e sempre
retornou a promessa da função A5, não é?
Em qualquer caso, vamos revisar o que a gente fez aqui.
Então, nessa aula, a gente aprendeu que o que acontece quando a gente adiciona a palavra
chave A5 antes de definir a função, aquilo que for retornado se torna uma promessa sempre
retornado a função A5, que você tem que lidar usando seja o then ou o await, mas o await
sempre tem que estar dentro do queiro, uma função que é A5, não se esqueça disso,
certo?
Então, por essa aula é só a J5 await, uma introdução, e você pode tentar usar o A5 await
ao invés de usar o then, o await também, se você quiser aprender mais, você vai ver
que em vez de, quando você tiver aquele catch block, tem o then e tem o catch, o catch,
você pode usar o try and catch dentro da função A5, que ele vai ser rejeitado automaticamente
retornado pela função A5, a função A5 retorna a promessa com um valor rejeitado,
se você usar o try catch, o block de try catch dentro da função A5, isso é um mais avançado,
mas essa aula só foi para a introdução do A5 await, certo?
Então, espero que tenham gostado e até a próxima.
Muito obrigado.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: