‫-: Então, vamos agora falar
‫sobre os problemas que podem surgir quando usamos muitas funções de retorno de chamada.
‫E para
‫fazer isso, vamos fazer um pequeno
‫exemplo para ilustrar esse efeito.
‫Agora lembre-se de que se você já está familiarizado com
‫Promises e Async / Await e, em geral,
‫Asynchronous Java Script, sinta-se
‫à vontade para pular esta seção e marcar
‫todos os vídeos como concluídos para que você
‫ainda possa chegar a 100 por cento de
‫conclusão do curso.
‫Mas se você
‫quiser aprender tudo sobre Java
‫Script Assíncrono e como usá-lo no OJS, vamos prosseguir.
‫Portanto, vá
‫em frente e obtenha os arquivos iniciais para este projeto
‫nos arquivos do curso.
‫Já tenho aqui no meu desktop,
‫então esta pasta aqui.
‫E é apenas este arquivo
‫lá, então é tudo de que precisamos para começar.
‫E eu tenho isso aqui no VS Code já aberto e
‫o que vamos fazer para
‫começar é apenas criar um NX. Arquivo JS.
‫Assim como antes.
‫Agora o que vamos fazer é
‫isso, vamos usar esse,
‫esse arquivo dog aqui, esse arquivo de texto.
‫E a partir daqui vamos ler a raça do cão.
‫E então faremos uma solicitação HTTP para
‫obter uma imagem aleatória de um cachorro com esta raça.
‫E então salve aquela imagem aleatória em
‫outro arquivo de texto.
‫Portanto, é um processo de três etapas
‫e tudo isso envolverá funções de retorno de chamada.
‫E no final veremos o problema que temos quando usamos
‫todas essas funções de retorno de chamada
‫umas dentro das outras.
‫OK?
‫Então, para isso, vamos usar
‫uma API bastante popular.
‫O que é mais como uma API divertida.
‫Mas, para esse tipo
‫de coisa, é uma boa ideia usá-lo.
‫Portanto, é o CÃO. CEO, API.
‫Então, basta clicar na API Dog aqui.
‫Então
‫aqui, a documentação.
‫E o que queremos é conseguir um cachorro aleatório,
‫ou uma determinada raça.
‫Então clique por raça aqui.
‫E aqui
‫embaixo, aqui está o endpoint da API que iremos atingir.
‫Portanto, é este URL aqui.
‫Então, quando você clica em buscar aqui,
‫a cada vez você obtém uma nova imagem, certo?
‫E,
‫portanto, nesta seção, faremos a solicitação
‫HTTP exatamente como aprendemos
‫na seção anterior.
‫OK.
‫Portanto, tudo o que
‫teremos de fazer é criar uma solicitação HTTP para esse URL e, em
‫seguida, ele nos trará de volta uma imagem.
‫OK?
‫Mas, por agora, vamos começar com uma parte
‫em que lemos o arquivo e obtemos o conteúdo
‫desse arquivo.
‫Então, em nosso índice. js, mais uma vez, precisamos do pacote ou
‫módulo do sistema de arquivos.
‫Então FS
‫e exija o módulo FS aqui.
‫E assim como antes de fazermos o fs. readfile e
‫fazemos a versão assíncrona.
‫OK.
‫Lembre-se de que aqui passamos a localização do arquivo e, em seguida,
‫uma função de retorno
‫de chamada que será chamada assim que terminarmos de ler o arquivo.
‫Portanto, temos nossa string de modelo aqui.
‫E então usamos um dirname como fizemos antes.
‫Portanto, o nome do diretório atual.
‫/cão. TXT.
‫Ok e então nossa função de retorno
‫de chamada, cujo primeiro argumento, como sempre, é o erro.
‫E então os dados que realmente estão no arquivo.
‫E só para ter
‫certeza, vamos registrá-lo no console, é claro.
‫Então, outra string
‫de modelo para que possamos gerar nossos dados de maneira agradável aqui.
‫OK.
‫Inicie o terminal aqui
‫e aumente um
‫pouco.
‫E então estou usando o nodemon exatamente como fiz antes e,
‫em seguida, o índice. js.
‫Ok, então raça é retriever.
‫E é exatamente isso que temos aqui neste arquivo.
‫Ok, então retriever é a raça que estaremos procurando.
‫Agora, dentro dessa função
‫de retorno de chamada, queremos fazer aquela solicitação
‫HTTP de que falamos antes.
‫E há maneiras de fazer isso
‫com módulos nativos
‫e sem módulos JS.
‫Mas é mais fácil usar apenas um pacote NPM para isso.
‫E há muitos de
‫novo, mas o que vamos usar se chama Super Agente.
‫Mais tarde, vamos usar outro,
‫mas por enquanto o Super Agente está bem para isso, ok.
‫E para realmente baixar este módulo usando NPM, vamos
‫começar criando nosso arquivo Jason de pacote.
‫Lembre-se disso?
‫Então, deixe-me terminar isso e fazer
‫o NPM nele.
‫E apenas pressione Enter em todos eles.
‫Isso realmente não importa.
‫OK.
‫Queremos apenas este pacote. arquivo jason
‫para que ele realmente contenha o nome do pacote
‫que estamos usando.
‫Portanto, sempre fazemos isso sempre que iniciamos um novo projeto.
‫E agora instale o NPM,
‫ou podemos apenas usar o I, que é o mesmo e depois
‫o nome do pacote.
‫Então, nada de novo aí, certo?
‫Agora, para usar
‫este pacote, criamos uma
‫nova variável que irá conter a função Super
‫Agent que este módulo nos expõe.
‫Vamos agora usar a função Super
‫Agent.
‫Portanto, para fazer uma solicitação
‫get, simplesmente usamos o método get nela.
‫Então pegue e então precisamos desse URL.
‫Ok, então esse que eu mostrei antes.
‫Então, apenas copie
‫e cole aqui em
‫uma string de modelo.
‫Porque agora vamos substituir essa
‫raça aqui.
‫Ok, então não queremos
‫isso, mas em vez disso,
‫queremos usá-lo, aquele que obtemos de nosso arquivo.
‫Portanto, neste caso, são os dados.
‫Direito?
‫E
‫assim, podemos realmente fazer uma solicitação HTTP get.
‫Agora, para obter os
‫dados, também teremos que usar o método end nisso.
‫E é aqui que vamos passar a função
‫de retorno de chamada.
‫Então, novamente, é um erro, primeiro
‫ligue de volta e
‫então passamos o resultado também.
‫E assim, nesta
‫função, vamos
‫primeiro registrar o resultado no console.
‫Portanto, os dados que obtemos estão na variável de resposta.
‫Então, este aqui.
‫E aí está o corpo.
‫Então é aí que está a resposta real.
‫Ok, agora vamos realmente testar isso.
‫E agora, com esse save aqui, ele realmente desceu.
‫Novamente, isso
‫é por causa da extensão anterior que configuramos anteriormente.
‫E talvez você também
‫tenha notado como ele substituiu as aspas normais que eu tinha
‫aqui por essas
‫aspas duplas e também inseriu o ponto e vírgula aqui.
‫E, na verdade, na última
‫seção, ou em uma
‫das últimas seções, nós configuramos isso de
‫forma que sempre tenhamos as aspas simples.
‫E assim, para manter nosso código consistente
‫aqui, vamos realmente
‫prosseguir e criar rapidamente o arquivo de configuração mais bonito.
‫Portanto, lembre-se de que é excelente.
‫Em seguida, temos aspas simples.
‫Defina como verdadeiro.
‫E lembre-se também da largura de impressão.
‫E defina-o para 80.
‫Ok, salve.
‫Salve este novamente.
‫E então você vê que temos nossas aspas simples agora de volta.
‫Então isso parece muito melhor na minha opinião.
‫Novamente, se você não gostar dessa forma,
‫é claro que você pode usar suas próprias configurações.
‫Tudo bem.
‫De qualquer
‫forma, este pedaço de código aqui
‫já deve estar fazendo a solicitação HTTP.
‫Então,
‫vamos testar isso.
‫E,
‫de fato, temos essa imagem aqui.
‫Então, na verdade,
‫o que queremos está dentro
‫desse amigo na propriedade da mensagem.
‫Então, mensagem
‫de ponto.
‫Então, assim.
‫E aqui temos nossa imagem retriever.
‫Vamos em frente e realmente mudar a raça aqui.
‫E não sou muito bom com cães.
‫Vamos apenas usar esta raça que eu
‫conheço, Labrador.
‫Eu nem sei como dizer.
‫Mas acho
‫que é isso, existe.
‫Vamos salvá-lo aqui novamente.
‫E agora temos outra imagem.
‫Na verdade, podemos clicar aqui e essa
‫imagem será aberta para nós.
‫OK.
‫Portanto, para fazer essa solicitação HTTP aqui, precisamos
‫dos dados que obtivemos antes.
‫Portanto, este dado.
‫E então precisávamos fazer essa solicitação aqui dentro
‫dessa função de retorno de chamada da função
‫de leitura de arquivo, certo?
‫E então você já tem uma função de retorno de chamada aqui.
‫Então, este dentro de um retorno de chamada.
‫Mas agora vamos adicionar outro.
‫Porque agora queremos salvar esta string aqui em
‫um novo arquivo de texto.
‫E então faremos isso aqui.
‫E então isso novamente terá outra função
‫de retorno de chamada.
‫Ok, faz sentido?
‫Portanto, fs
‫writefile e,
‫em seguida, o nome do arquivo.
‫Vamos chamar isso de imagem de um cachorro. texto.
‫Em seguida, os dados que queremos salvar naquele arquivo que
‫está em repouso. corpo. mensagem.
‫E então a função de retorno de chamada.
‫E este aqui não terá nenhum dado é
‫claro, mas temos o erro novamente.
‫Vamos registrar algo no console, como
‫uma imagem aleatória de um cachorro
‫salva em um arquivo.
‫Salve-o, ele será executado
‫novamente e aqui está nosso arquivo de imagem.
‫E, na verdade, você pode ver que
‫o código do VS exibe essa imagem aqui para nós.
‫Salve-o novamente aqui, ele
‫executará novamente nosso código e
‫agora temos, na verdade, temos
‫uma imagem diferente.
‫Tudo bem.
‫Portanto, nosso código está realmente funcionando.
‫Vamos apenas adicionar um pequeno identificador de
‫erro aqui, caso algo dê errado.
‫Por exemplo, digamos que adicionamos algum nome estranho aqui.
‫Execute novamente.
‫E agora não será possível encontrar uma imagem
‫para isso.
‫E isso realmente resultará em um erro aqui.
‫Portanto, devemos sempre
‫fazer esse tipo de tratamento de erros no início
‫e dizer
‫isso se houver um erro,
‫e podemos apenas registrar o erro. mensagem.
‫E, na verdade, também devemos
‫dizer que queremos retornar imediatamente desta função se houver um erro.
‫Portanto, ele retornará e registrará no
‫console esse erro.
‫E nada mais acontecerá então.
‫OK.
‫É o que diz novamente, não foi encontrado aqui.
‫E não salvou nada no
‫arquivo porque já retornamos da função aqui em cima.
‫OK?
‫E o mesmo aqui embaixo,
‫caso haja um erro ao salvar o arquivo no disco.
‫Vamos voltar aqui e salvar
‫novamente.
‫E agora está funcionando bem novamente.
‫OK.
‫Portanto, este é
‫apenas um pequeno
‫exemplo para mostrar como é fácil terminar com retornos de
‫chamada dentro de retornos de chamada dentro de retornos de chamada.
‫E isso é claro porque,
‫já sabemos que no
‫Note JS, devemos sempre usar código assíncrono, certo?
‫Acabamos usando call backs dentro de call
‫backs dentro de call backs.
‫E às vezes
‫pode ser ainda mais profundo do que o que temos aqui.
‫Você poderia, claro,
‫ter cerca de 10 níveis dentro um do outro.
‫Todos esses retornos de chamada
‫fazem nosso código parecer um pouco confuso.
‫Torna-se difícil de entender e também, em
‫geral, difícil de manter.
‫Novamente, talvez não neste nível com apenas três retornos de chamada
‫dentro um do outro.
‫Mas se tivéssemos um aninhamento ainda mais profundo,
‫poderia rapidamente se tornar
‫um pesadelo manter um código como este.
‫E é por isso que esse padrão
‫foi chamado de "chame de volta o inferno".
‫É fácil
‫identificar essa forma triangular em nosso código.
‫É o que temos aqui.
‫Como esse tipo de forma triangular.
‫Sempre que você vê isso, é um sinal
‫de que
‫basicamente está no inferno.
‫OK?
‫E talvez
‫você veja ou ouça esse termo quando fizer alguma
‫pesquisa no Note JS ou algo assim.
‫Mas agora, esta é realmente a única
‫maneira que conhecemos de como escrever código assíncrono
‫neste ponto.
‫Mas vamos guardar isso no resto desta
‫pequena seção.
‫Então, vamos aprender como usar
‫algo chamado Promises.
‫E isso, no final, resolverá
‫nosso problema e
‫tornará nosso código mais fácil de ler e manter.
‫Então, vamos fazer isso no resto da seção.