Dúvidas no retorno de uma função async

[marcosyoggy]

Etapa da aula

11

Nome da aula

Exercícios Aula 06

Link da aula

https://app.nutror.com/v3/curso/a977a43d31cedcb6e7d064649ddd6c5436155aaf/curso-de-javascript-roger-melo/aula/1378497

Descreva a dúvida

  Antes de começar o exercício da aula 06 da etapa 11, estava revisando as aulas sobre Request usando o VsCode.
  O código abaixo têm duas funções async, com apenas uma diferença, o 'console.log' está posicionado, no 1º caso, , fora

do escopo da função que deveria retornar um objeto, mas retorna uma Promise e a função 'agiu' de forma síncrona; No 2º caso, o 'console.log' está dentro do escopo da função, e agora o comportamento foi de forma assíncrona e o conteúdo retornado foi o objeto esperado. Como poderia descrever essa diferença de comportamento???... No 1º caso, a função recebeu uma Promise sem descompactação de seu conteúdo??? E no 2º caso, pelo fato de 'console.log', estar encapsulando a expressão "await myFuncAsync(user_name))" a função retornou o objeto??? Seria isso.....Obrigado e um abraço!!!

const myRequisitionExercise = async () => {
  const myDatas = await fetch("https://pokeapi.co/api/v2/pokemon/bulbasaur")
  return myDatas.json()
}
const displayThen = async () => await myRequisitionExercise()

console.log('opeação nº 1')
console.log('opeação nº 2')

console.log(displayThen())

console.log('opeação nº 3')
console.log('opeação nº 4')

//----------------------------------------------------------------------------

const myFuncAsync = async (user_name) => {
  const myUserData = await fetch(`https://api.github.com/users/${user_name}`)
  return myUserData.json()

}
const displayMyUserData = async user_name => console.log('Meus dados de usuário:', await myFuncAsync(user_name))

// displayMyUserData('marcosyoggy')

console.log(1)
console.log(2)
console.log(3)

displayMyUserData('marcosyoggy')

console.log(4)
console.log(5)
console.log(6)

@Roger-Melo

[Roger-Melo]

Olá @marcosyoggy.

O código abaixo têm duas funções async, com apenas uma diferença, o 'console.log' está posicionado, no 1º caso, , fora do escopo da função que deveria retornar um objeto, mas retorna uma Promise e a função 'agiu' de forma síncrona;

Toda função async retorna uma promise.

Isso foi mostrado nessa aula. Dá uma revisada nela =)

Sobre Promise {<pending>} ser exibido no console antes de "operação nº 3" e "operação nº 4", isso não significa que a função é síncrona. Significa apenas que o state da promise foi exibido.

A operação assíncrona que a função executa não foi finalizada. Por isso o state dela é pending.

Vc só vai poder aproveitar o valor do request que displayThen retorna se usar um then (por exemplo):

console.log('operação nº 1')
console.log('operação nº 2')

displayThen().then(console.log)

console.log('operação nº 3')
console.log('operação nº 4')

Fazendo isso, o valor da promise que displayThen retorna é exibido após os últimos 2 console.log acima.

---

No 2º caso, o 'console.log' está dentro do escopo da função, e agora o comportamento foi de forma assíncrona e o conteúdo retornado foi o objeto esperado. Como poderia descrever essa diferença de comportamento???

Nada fora do esperado.

await está fazendo basicamente a mesma coisa do then no exemplo que dei acima.

A diferença é que com o then, o valor resolvido da promise é atribuído ao parâmetro da função de callback.

Já com o await, uma expressão await abc123 resulta no valor resolvido da promise.

Fez sentido?

---

Antes de começar o exercício da aula 06 da etapa 11, estava revisando as aulas sobre Request usando o VsCode.

Na real o VSCode não tem muita relação com requests, é apenas o editor de texto que vc usa pra escrever o código que vai rodar no navegador. Esse sim executa os requests =)

[marcosyoggy]

Possivelmente...a confusão foi quando tentei obter o retorno do objeto parseado...sem "parseá-lo!!!"..Acho que foi isoo...Obrigado pela ajuda.

const funcAsync = async () =>{
  const REF =  await fetch("https://pokeapi.co/api/v2/pokemon/bulbasaur")
  const data = await REF.json()
  const {id, name} = data
  return console.log(`O 'id' do Pokemon pesquisado é: ${id}, e seu nome é: ${name}`)
  // return `O 'id' do Pokemon pesquisado é: ${id}, e seu nome é: ${name}`

}

funcAsync()
// console.log(funcAsync())

[Roger-Melo]

Isso mesmo =)

No que precisar, é só abrir uma nova issue =)