Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Async e await

Referente ao curso EcmaScript 8 e 9: novas formas de escrever em JavaScript, no capítulo Analisando mais a fundo eventos assíncronos e atividade Async Await

por Bernardo Pereira Oliveira
| 80.4k xp | 18 posts
Estagiário em Desenvolvimento Front-End

Gente, estou com dúvida em relação ao async e await nessa parte que vou colocar a abaixo:

(async function asyncListaLivros() {

    const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=javascript");

    const dados = response.json();

})()

Porque precisamos colocar também um await no código abaixo para que seja possível fazer a conversão em código json.

    const dados = response.json();

A minha intuição é que se já esperamos a requisição do fetch, e ela veio completa, porque temos que esperar ali no response.json() também?

3 respostas
por Estudante
| 242.7k xp | 57 posts

Bernardo,

O método .json() também retorna uma Promise como resultado do processamento da stream do fetch da request (sua variável response), retornando um objeto JSON em caso de sucesso.

por Bernardo Pereira Oliveira
| 80.4k xp | 18 posts
Estagiário em Desenvolvimento Front-End

Entendi agora. Então o esse método também retorna um promise.

Mas me tira outra dúvida: a partir daí não tem mais promise, então eu não preciso utilizar mais o await para, por exemplo, manipular os dados já convertidos?

Coloquei um exemplo abaixo do que estou dizendo:

(async function asyncListaLivros() {

        const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=javascript");

        const dados = await response.json();
        const titulo = dados.items.map(item => item.volumeInfo.title)

        renderizaLista("asyncListaLivros", titulo)
    })()
solução!
por Estudante
| 242.7k xp | 57 posts

Bernardo,

Não, precisa.

Você também pode usar o then(), exemplo:

const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=javascript");

response.json().then(data => {
    const titulo = data.items.map(item => item.volumeInfo.title)
    renderizaLista("asyncListaLivros", titulo)
});

ou encadea-los (uma operação chamada composition):

fetch("https://www.googleapis.com/books/v1/volumes?q=javascript").then(response => {
    return response.json();
}).then(data => {
    const titulo = data.items.map(item => item.volumeInfo.title)
    renderizaLista("asyncListaLivros", titulo)
});