Solucionado
Olá pessoal. Estou com uma dúvida.
Eu não entendi muito bem o que esses ".then()" fazem. Ou melhor... entendi parcialmente. O fetch() faz uma solicitação ao servidor OK O 1º .then() captura a resposta dessa solicitação OK Mas e esse 2º .then()... eu vi o que fez na aula, mas não entendi o conceito e como funciona. Alguém aí pode me ajudar?
fetch("http://localhost:4000/clientes")
.then( resposta => {
return resposta.json()
})
.then ( json => {
console.log(json);
return json;
})
Oi Jefferson. O then() é utilizado para tratar uma promise que é resolvida. O fetch retorna uma promise e quando este é resolvida precisa ser tratada pelo .then através da função callback. O que acontece é que no caso deste exemplo, a função callback dentro do 1º then está retornando outra promise. O método .json() retorna uma promise e esta também precisa ser tratada. O 2º .then() então é para tratar a promise do método json().
Entendi... Mas por que isso? Porque gerar outra promise? Porque não dá pra converter a primeira promessa em array de objetos de cara? Que tratamento é esse que o then realiza? Pois na segunda ele só imprimiu a promessa... Porém na verdade isso gerou um array de objetos!!!
Oi Jefferson.
O then é importante por pelo menos duas razões:
1º - Por se tratar de uma tarefa assíncrona o fetch não traz os resultados imediatamente. É uma requisição que pode levar tempo. Para não termos uma estrutura bloqueante ou seja, para que o fluxo do seu programa não fique travado esperando uma resposta do fetch, foi desenvolvida esta estrutura não bloqueante que por sua vez deve trabalhar de forma assíncrona. Desta forma o fluxo do seu programa não fica travado esperando a resposta do fetch. É aí que entra o .then. Porquê no .then passamos uma função de callback, ou seja uma tarefa que fica esperando o fetch responder para ser executada.
2º - Não podemos ter certeza que teremos sucesso toda vez que fazemos uma requisição. Podem haver erros que não tragam a resposta esperada. Com o método then() só executamos a callback deste método se a resposta for obtida com sucesso. Por isso que existe também o .catch que é usado para tratar erros desta requisição (mas que no exemplo da aula ainda não foi usado) Então passando uma função dentro do then teremos certeza que ela só será executada quando e se a requisição for respondida com sucesso.
Por que usar o .json()?? Porque o resultado da requisição mesmo quando temos sucesso não traz somente o corpo da resposta, mas traz também uma série de outras informações importantes. Além disso o corpo da resposta chega em formato de bytes. Desta forma o .json() pega apenas o corpo da resposta em formato de bytes e devolve um json formatadinho.
E por que a função json() que passamos também precisa do .then??
Porque o método json() também é assíncrono, ou seja , ele não retorna 'de cara' a array de objetos. Isso porquê mesmo que tenhamos certeza de que a resposta da requisição foi obtida com sucesso, não podemos garantir que os dados do corpo da resposta podem ser convertidos em formato json. Então é um processo mais demorado e que também pode retornar erros (que devem ser tratados pelo catch.)
Att
IBERÊ, MUITO OBRIGADO!
Mano ta muito bem explicado, eu só vou reler algumas vezes pra absorver melhor, mas sua explicação está top, melhor só desenhando rsrsrsrs.
Muito obrigado, pois mesmo lendo a doc do Mozilla eu não tinha entendido, agora ficou mais claro.