Dominando a integração de API no React com Axios | Integre seu aplicativo com o backend

1. Introdução ao curso: Bem-vindo aos cursos em que vamos dominar a integração de API no react Meu nome é Fassel e estou entusiasmado em guiá-lo pelo empolgante mundo da integração de APIs no mundo do react Sou um empreendedor apaixonado por ensinar on-line e, em minha carreira, criei muitos aplicativos robustos que foram usados por milhões de usuários em todo o mundo, e estou aqui para compartilhar minha experiência e conhecimento com todos vocês. No mundo dinâmico de hoje, integração de APIs é um dos aspectos importantes quando se trata de criar aplicativos escaláveis de nível de produção Cada aplicativo web que você vê tem um front-end e um back-end Se você estiver criando um front-end, é fundamental que você entenda como integrar seu aplicativo e se comunicar com o servidor de back-end Ao longo de nossa jornada, mergulharemos profundamente na integração da API com o react. Usaremos o eixo para o mesmo. Falando sobre o curso, este curso aborda muitos aspectos da integração de API e da realização de chamadas de API. Por exemplo, sempre que você estiver fazendo uma chamada de API, é provável que você não receba uma resposta imediata. Então, como você pode gerenciar o carregamento para melhorar a experiência do usuário e como gerenciar os estados de erro. Também simplificaremos o processo de fazer chamadas de API e veremos como isso pode ser feito e alcançado com o axis. Também entenderemos como você pode fazer chamadas simultâneas de EPI usando axis Também temos um cenário em que abordaremos diferentes tipos de solicitações de EPI, como get request, post request, aprimoraremos a segurança usando o Então, todos esses recursos todas essas coisas são o que abordaremos neste curso específico. E ao final deste curso, posso garantir que você terá habilidades para integrar qualquer tipo de EPI em seu aplicativo de reação com confiança, sem E isso abriria infinitas possibilidades para você no mundo do desenvolvimento web. Para quem é esse curso? Portanto, este curso é perfeito para quem deseja aprimorar suas habilidades de desenvolvimento de reações Então, se você é um novato, um desenvolvedor experiente ou um desenvolvedor intermediário ou se você está apenas explorando como os EPIs podem ser integrados a aplicativos front-end , esse curso seria perfeito para todos vocês Então, com esse conjunto, você está pronto para transformar a maneira como lida com APIs em seu aplicativo web que é construído usando o react Estou muito empolgada em guiá-lo por este curso e nos vemos do outro lado. 2. Configurando o React Project: Oi, aí. Então, agora é hora de começarmos a criar nosso aplicativo react, e vamos fazer isso com a ajuda da linha de comando. Então, a primeira coisa que vou fazer é acessar ou navegar pela linha de comando até a pasta do projeto. Agora, o que quero dizer com pasta de projeto é que é uma pasta de minha escolha onde eu desejo ter meus projetos de reação organizados, ok? Então, o que você pode fazer é acessar o Finder. exemplo, se você estiver no Mac, você pode ir para o Finder ou se você estiver no Windows como eu, você pode ir para o Explorer, certo, e criar uma pasta no local de sua escolha, você pode chamar a pasta, como quiser Eu diria que é reagir. E então, a partir da linha de comando, você pode simplesmente navegar até o local em que criou a pasta. Então, eu criei essa pasta react aqui neste local específico, e CD é o comando, que é alterar o diretório, e está me ajudando a navegar ou acessar essa pasta específica ou estar nessa pasta a partir da linha de comando. Então, agora que estou nessa pasta específica, vou limpar todo o resto. Tudo bem Agora, nesta pasta específica, vou começar a criar meu aplicativo react. E para isso, vou usar o NPX, ok? Opa. Então, eu já criei alguns aplicativos de reação antes. Então você pode ver essa sugestão aqui, ok, mas não há nada que eu possa fazer sobre a sugestão. Está bem? Mas ignore essa sugestão por enquanto, porque o que esse terminal em particular faz é o que ele vê em seu histórico, ele continua sugerindo você, o que é bom. Mostrando todo o comando, tudo bem. Então, NPX, vou usar o NPX. Está bem? Agora, o NPX é uma sintaxe, certo? É usado para executar os pacotes de nós ou é usado para executar os E então vamos usar o aplicativo Create react. Tudo bem Agora, o que é o aplicativo Create react. O aplicativo Create React é uma espécie de ferramenta que ajuda você a criar todo o aplicativo react. Agora, por que estamos fazendo uso disso? Porque, você sabe, o projeto react tem que ser organizado de uma certa maneira. Por exemplo, ele precisa ter a pasta SRC. Ele precisa ter alguns arquivos. E tudo isso se junta e permite que você ou seu aplicativo funcione de forma perfeita, certo? Assim, você também pode criar esses arquivos manualmente. Mas essa é uma ferramenta que permite criar ou configurar a estrutura do aplicativo da maneira correta. Está bem? E depois disso, vou apenas mencionar o nome do meu aplicativo, que eu possa chamá-lo de aplicativo MyRact, algo assim Ok. E o que eu posso fazer é simplesmente pressionar Enter. No momento em que eu pressiono Enter, o que isso fará é criar uma pasta nesse local específico. Então, nesse local específico, ele criará essa pasta. Por que está criando uma pasta nesse local? Porque eu naveguei até essa pasta a partir do terminal, e esse será o nome da pasta sob a qual todos os arquivos do meu projeto react existirão Está bem? Assim, você pode pressionar Enter e deverá ver algum tipo de processamento acontecendo. Assim, você pode ver a criação de um novo aplicativo de reação nesse local específico. Ele está instalando alguns pacotes e isso pode levar alguns minutos. Então, ele está instalando. Ele também informa o que está instalando. Está instalando react, react Dom, react scripts e tudo, tudo o que precisa. Então, vamos esperar um pouco até que todo esse processo seja concluído e vejamos uma confirmação. Então, recebi a confirmação e também recebi uma pequena mensagem. Ok. Então, quando comecei a gravar este vídeo, há uma nova versão secundária, que diz sobre o NPM, que está disponível, e está me perguntando se eu posso atualizar Ok, então eu vou atualizar mais tarde. Você pode não ver isso, ok, mas vou ignorar isso por enquanto. É só uma notificação de upgrade. Você pode ver a confirmação aqui, happy hacking. Tudo bem. E se você rolar até aqui, verá todo o processo do que aconteceu. Então, executamos esse comando aqui. Opa Deixe-me rolar para cima. Então, executamos esse comando aqui. Ok, se você vier aqui, você pode ver que ele adicionou tantos pacotes. Demorou 36 segundos. Se você vier aqui, ok, foi dito que o sucesso criou esse aplicativo específico neste local e dentro desse diretório. Então, você precisa navegar até esse diretório e, dentro dele, você pode executar todos esses comandos aqui. Está bem? Agora, depois de navegar, ele fornece comandos prontos, como o NPN start, ele será iniciado no servidor de desenvolvimento Portanto, o aplicativo react que você criou vem com um servidor inbllt incorporado Você pode executar este comando para agrupar o aplicativo e em arquivos estáticos, basicamente para implantação em produção. Isso iniciará o executor de teste, caso você queira executar casos de teste, NPM run Ok, isso é algo que você pode executar. Então, a sugestão é que você pode começar executando isso aqui. Vou copiar isso. Está bem? Vou colar aqui. Vou até este diretório, o, e então ele lhe dirá o início do NPM Agora, esse é um comando usando o qual você pode iniciar um servidor de desenvolvimento em sua máquina local. Então eu posso executar esse comando também, ok? E você podia ver o aplicativo instalado e funcionando. Então esse é o aplicativo, ok? Você pode ver o navegador aberto automaticamente, e você pode ver que este é o aplicativo que está funcionando. Agora, este é um servidor que está mostrando seu conteúdo ou se está executando seu aplicativo react no navegador Agora, qualquer alteração que você fizer nos arquivos, você verá recarregamentos ao vivo acontecendo aqui. Tudo bem? Agora, você pode ver a mensagem aqui, como se precisasse editar esse arquivo específico e salvá-lo para recarregar Está bem? Portanto, essa interface que vem desse arquivo em particular, é o que diz. E se você clicar aqui, esse é o link para o site oficial do react. É a isso que está vinculado. Está bem? Assim, você pode acessar esse site e conferir ou ler algumas coisas também. Tudo bem Mas algumas coisas que eu gostaria de mencionar aqui são que, depois de iniciar o servidor de desenvolvimento, você pode pará-lo pressionando Control e C no Windows ou Command e C no Mac. Está bem? Estou no Windows, então pressiono Control C, e você pode ver que ele encerrou esse trabalho em particular E aqui está, se você tentar atualizar, isso não vai funcionar Ok, porque o servidor está inativo, certo? Agora, para colocar seu servidor em funcionamento, você precisa executar o NBM start nessa pasta específica Está bem? Só então seu servidor estará ativo. Portanto, durante o desenvolvimento, você pode manter o servidor ligado e realmente modificar os arquivos, salvar e ver as mudanças acontecendo ao vivo. Está bem? Agora, vou falar um pouco mais sobre esse comando Então, criamos o aplicativo react ou todo o aplicativo usando esse comando específico. Agora você também pode adicionar opções aqui no final. Está bem? Então, o que você pode fazer é usar os modelos aqui. Está bem? Agora, digamos que, ao trabalhar com o react, você também queira usar o texto datilografado. Está bem? Então, se você estiver usando texto datilografado, você pode adicionar algo assim Você pode dizer template aqui e digitar script. Não vou executar isso, mas isso é apenas uma informação extra. O que isso fará é usar o modelo de texto datilografado para criar seu aplicativo e adicionar o suporte de texto datilografado desde o início, o que é útil se você estiver trabalhando em um projeto maior que pode se um projeto maior que pode beneficiar da Tudo bem Então você pode usar esse comando dessa forma, tudo bem. Espero que esse comando esteja claro. NPX cria um toque de reação. Portanto, não temos o servidor aberto em execução, mas agora você pode reiniciar o servidor novamente dizendo NPM run NPM start. Me desculpe Então, é o início do NPM, algo assim. E se você iniciá-lo, ele iniciará novamente o servidor. Tudo bem Então, espero que isso seja útil e espero que você tenha conseguido acompanhar. 3. Configurando nosso IDE - Código do Visual Studio: Este é nosso primeiro aplicativo baseado em reação, que criamos, ok? Ou devo dizer que não criamos. Ok. Portanto, esse é um projeto gerado automaticamente usando o aplicativo Create React. Ok, e também está nos dando algumas dicas aqui. Você pode editar o app dot qs e salvar para recarregar. Está bem? Ele tem um link para aprender a reagir, que o levará ao site oficial do react. Tudo bem, até agora tudo bem. Portanto, este é o nosso aplicativo instalado e funcionando. Agora, o que precisamos fazer? começar a codificar e modificar as coisas. E o que vamos fazer para isso? Vamos instalar um IDE que é o código ID do Visual Studio. Ok. Então, isso é o que parece. Se você já o tem no computador, se não o tem, acesse este site oficial. É uma ferramenta gratuita. É gratuito, desenvolvido em código aberto e executado em qualquer lugar. Como estou no Windows, estou solicitando que eu baixe uma versão estável para Windows Você pode alternar para qualquer sistema operacional necessário. Mas se o seu sistema operacional tiver um instalador aqui, ele funcionará automaticamente. Então, se você estiver fazendo login do Mac aqui, ele mostrará o download do Mac. Está bem? Então, seja qual for a plataforma em que você estiver abrindo isso, ele mostrará esse botão e você poderá passar por isso se não souber o que é o código do Visual Studio Mas basta fazer o download e instalá-lo como qualquer outro programa de software. Eu já o tenho instalado, então não vou mostrar as etapas de instalação, mas as etapas de instalação não são nada complexas. É muito simples e direto. 4. Primeiros passos: Agora, depois instalar o código do Visual Studio com êxito, você verá uma página como esta. Portanto, se você abrir o código do Visual Studio, pela primeira vez, verá esta página de boas-vindas. Agora, sou usuário do Visual Studio Code há algum tempo, ok? E você está vendo todos esses projetos recentes. Portanto, é provável que você não veja essa lista de projetos recentes, a menos que seja um usuário. Está bem? Mas como sou usuário, como eu disse, estou vendo a lista de projetos recentes que usei ou criei no passado. Além disso, você verá essas opções aqui: novo arquivo, abrir arquivo, abrir pasta, clonar repositório Git, conectar-se a tudo É uma ferramenta muito útil. Código do Visual Studio, eu o uso o tempo todo. Agora, para abrir o projeto, você conhece a pasta em que criou o projeto. Então você pode simplesmente clicar aqui, Abrir pasta e navegar até o local da pasta onde você criou o projeto. Como alternativa, se por algum motivo você não estiver vendo isso, você pode ir para o arquivo nas opções do menu aqui e ver a pasta aberta. Ambos são iguais. Então, o que vou fazer é selecionar OpenFolder, navegar até o diretório de minha escolha e abrir o projeto aqui Agora, quando selecionei Abrir pasta, vi essa janela de pasta, que é exploradora, navegue até a pasta em que criei o aplicativo react E vou selecionar essa pasta específica. Este é o meu projeto de aplicativo react que criamos. Lá dentro, você verá alguns arquivos, mas precisará selecionar a pasta raiz. Eu direi que selecione e ela abrirá essa pasta específica para mim. Agora eu posso fechar esta página de boas-vindas aqui, ok? Então você pode ver o projeto aqui no lado esquerdo, ok? Você pode ver essa pasta inteira. Se você expandir isso, você verá os arquivos dentro. Está bem? Então, quando você executou o comando chamado Create React app, ok com Create React app, ele criou tudo isso para você. Você também pode criá-lo manualmente. Mas, como você pode imaginar, isso vai ser muito entediante, certo Então, essa ferramenta específica, aplicativo Create React, faz o trabalho para você, configurando toda a estrutura do projeto para você. Está bem? Analisaremos essa estrutura de projeto em breve, mas, por enquanto, o que eu também gostaria de explicar é que temos o servidor instalado e funcionando a partir do terminal. Agora, o que posso fazer é não precisar usar um terminal externo. O código do Visual Studio tem uma maneira pela qual eu posso realmente ter um terminal dentro do código do Visual Studio Dessa forma, nunca preciso sair código do Visual Studio e mudar para um terminal local. Aqui no topo das opções, vou ver o terminal aqui. Você pode dizer novo terminal, e você pode ver que este é um terminal integrado dentro do código do Visual Studio. E se você disser PWD, que é o diretório de trabalho presente, o terminal é aberto automaticamente na pasta que você abriu dentro do código do Visual Studio, que é a pasta do projeto Portanto, você também não precisa navegar, não precisa executar comandos, CDs e tudo mais e navegar, isso funciona como um terminal local. Então, aqui, posso dizer que o NPM começa aqui. No momento em que eu disser, recebo um erro, você pode ver que algo já está sendo executado na porta 3.000 E o que está sendo executado, nosso próprio aplicativo está em execução e está nos perguntando se você deseja executar o aplicativo em outra porta. Eu não quero fazer isso. Eu vou dizer que não. Ok, e isso simplesmente interromperá a execução. Está bem? Mas o que vou fazer é fechar esse servidor porque não quero mais usar um terminal externo, você sabe, externo por aqui. Está bem? Quero usar terminal fornecido pelo código do Visual Studio e iniciarei o NPN, e agora ele deve executar o servidor de desenvolvimento para você Está bem? Dessa forma, o que podemos fazer é mover isso para uma nova janela. Então, aqui estamos na nova janela, e eu tenho o código do Visual Studio em execução na nova janela. Então, dessa forma, eu não preciso deixar o código do Visual Studio nunca. Eu posso até minimizar isso aqui desse jeito. Está bem? Eu posso até mesmo criar um novo terminal a partir daqui, para que você possa ver mais, e você pode ter vários terminais funcionando aqui. Está bem? É muito útil, e essa é a razão pela qual. Então, esse tipo de ferramenta que o Visual Studio Code fornece é a razão pela qual ele é tão amado na comunidade de desenvolvedores. Agora, também mostrarei a lista de extensões que eu tenho. Então aqui, se você acessar essa guia de extensão no lado esquerdo, aqui você tem algumas opções como pesquisar, controlar o código-fonte, executar e desembarcar tudo isso, ok? Estou usando o Docker também em alguns dos meus projetos, então você também pode ver o Docker aqui Mas você pode não ver isso. Está bem? Isso precisa de uma extensão separada. Está bem? Mas se você for para a extensão, agora o que são extensões? Portanto, as extensões permitem que você aprimore ou estenda a funcionalidade padrão que o Visual Studio Code já fornece. Então você pode ver, eu tenho uma extensão para o notebook Jupiter. Ok. Sempre que estou programando em Python , e se eu quiser suporte para notebook , eu uso essa extensão Ok. Então eu tenho essa extensão. Isso não é necessário para reagir. Eu tenho a extensão Python. Está bem? Agora, essa tag de renomeação automática, isso pode ser útil para o React porque, você sabe, se você estiver renomeando uma tag, tudo bem, e se houver uma tag de fechamento, o que isso fará é renomear a versão paga dessa tag específica Ok, então isso é algo que você pode ter. É útil. Por exemplo, se eu tiver que dar um exemplo, deixe-me dar um exemplo. Então, digamos que se eu criar ou deixar eu abrir algum arquivo aqui. Ok, deixe-me abrir um arquivo HTML. Agora, essa coisa aqui, você pode ver, deixe-me ir até aqui, rolar para baixo. Portanto, esse título tem uma tag de abertura e uma tag de fechamento. Então, por causa dessa extensão específica, se eu renomear a tag de abertura, você pode ver que a tag de fechamento também está sendo renomeada Está bem? Então esse é o benefício dessa tag renomeada automaticamente Você não precisa renomear a tag de abertura primeiro e depois renomear a tag de fechamento, coloração por pares, como você pode ver pelo próprio ícone, está acostumada a destacar a cor do par final do colchete Isso é útil se você estiver usando muitos colchetes em seu Okay, Debugger for Java, contêineres de desenvolvimento, jango doco, tudo isso é usado para outras linguagens, pacote de extensão para Java, gradle para Java muitos colchetes em seu Okay, Debugger for Java, contêineres de desenvolvimento, jango doco, tudo isso é usado para outras linguagens, pacote de extensão para Java, gradle para Java e itálico. Está bem? Isso é para desenvolvimento assistido por IA. Isso também serve para exemplos de uso da API Intelicode. Ok. Eu tenho alguns para Python Então, tudo isso é relacionado ao Python, vou rolar para baixo, um servidor ativo Não precisamos desse Maven para Java. Isso também não é necessário. Mais bonito é algo que você pode usar. Isso formata o código. Ele organiza o código para você. Ok. E sim, isso é o que temos. Ok. Eu também vou adicionar algumas extensões agora mesmo aqui. Está bem? Então, o que você pode fazer é pesquisar trechos de código de reação aqui, algo assim Ok. Ok, então você pode pesquisar o ES seven plus react, algo assim. E você verá essa extensão com quase milhões de instalações Então, são 12,9 milhões enquanto estou gravando este vídeo. Obviamente, isso continuará aumentando e você poderá ver um número diferente ao assistir isso. Então, isso é extensão. Esse é o nome ES seven plus react redux react Native snippets Agora, o que isso faz é te dar modelos, ok? Por exemplo, se você quiser criar uma função, então você pode dizer RAFC Você pode simplesmente digitar isso e ele fornecerá toda a definição da função. Ok. Então, esse tipo de atalho ele tem, o que ajuda você a economizar tempo Então você pode instalar isso. Vou clicar em Instalar e adicionar à minha lista de extensões. Está bem? Então, sim, nós o temos instalado agora, ok? Você pode explorar mais plug-ins ou extensões de reação no mercado aqui e pode brincar com eles. E você pode aprimorar a funcionalidade padrão que o Visual Studio Code já fornece a você. Tudo bem Então, sim, trata-se de configurar o código do Visual Studio, e espero que você o tenha achado útil. 5. Integrando APIs no React: Então, agora é hora de começarmos a falar sobre como você pode trabalhar com EPIs em seu aplicativo de reação Agora, APIs, como você sabe, EPI significam interface de programação de aplicativos e é uma forma um servidor remoto ou back-end expor o conjunto de funcionalidades ao cliente Está bem? E você pode ter um aplicativo de reação no front-end que talvez queira consumir os serviços que estão sendo expostos pelo servidor de back-end Certo? E hoje, se você está criando qualquer tipo de aplicativo, usar EPIs é muito, muito comum, ok? Não consigo imaginar um aplicativo de nível de produção não consuma EPIs Ok, as APIs são muito comuns nos dias de hoje. E se você quer se tornar um desenvolvedor sério, é importante que você entenda como você pode usar EPIs da maneira certa em seu aplicativo de reação Então é isso que vamos abordar uma forma prática, ok? Então, o que vamos fazer é que eu já tenho esse aplicativo react, que criei usando o VT e tenho arquivo GSX do aplicativo, onde vou escrever todo o meu código É um arquivo de componente, que está sendo renderizado no Minix aqui Você pode ver que está sendo renderizado aqui. Tudo bem? Agora, a primeira coisa para trabalhar com APIs é que você precisa de um conjunto de ABIs, ok E, felizmente, temos um conjunto de APIs falsas gratuitas aqui. Ok, isso pode ser usado para testes e prototipagem. Então, vou usar este site chamado snplaceholder.typod.com . Tudo bem E como chegar até aqui, você pode digitar diretamente o URL no navegador ou pesquisar por GCN Placeholder no Google e você verá esse espaço reservado cn Tudo bem Então, acessando este site, você verá que ele fornece EPS falso e confiável gratuito para testes, ok? Ele lista os patrocinadores aqui. Ok, e isso te dá uma ideia de como você pode usá-lo aqui Está bem? Então você pode ver aqui. Esse é o endpoint que ele está fornecendo. Está bem? Sim, é um ponto final de dois, e você pode acioná-lo aqui Você verá o S e a resposta. Está bem? Você pode ver aqui. Portanto, você tem o ID do usuário, o ID , o título e o preenchimento aqui exibidos. Está bem? E você pode acessar a API. Ok. Deixe-me gostar muito, você pode acessar a API dessa forma usando o método fetch em JavaScript. Agora, buscar JavaScript não é um conceito de reação, mas é conteúdo relacionado a JavaScript, desculpe, conceito de JavaScript. E como o react é baseado em JavaScript, você pode usar fetch em seu código Se você executar esse script, o que isso está fazendo é que fetch basicamente retorna uma promessa e, em seguida, estamos fazendo uso dela , em seguida, aqui Então espera que isso termine. Então você recebe a resposta aqui e ela é executada. Então, o que está acontecendo é que a resposta é levada em consideração aqui e convertida em JSN Depois que esse processo for concluído, você terá o JCN bloqueado no Está bem? Se você executar esse script, verá que essas são as saídas que você obtém, certo? É construído em um navegador. Isso permite que você corra até aqui. E há muitos endpoints que ele fornece. Ok, você pode ver o slash Post. Eu vou te fornecer 100 posts, então você pode ir até aqui. Você pode ver 100 postagens que ele está fornecendo a você. Então, se você quiser muitos dados, pode consultar esses comentários, álbuns, fotos, que fornecerão 5.000 fotos, todos, usuários e tudo mais. Está bem? Então, sim, essas APIs que você pode usar Há muitas coisas. Se você quiser fazer uma solicitação de obtenção, esses são dez pontos. Se você quiser fazer uma solicitação de postagem, há alguns endpoints aqui Solicitações de patch, solicitação de exclusão também. Agora, se você conhece os EPIs e como eles funcionam, você sabe que EPIs são de tipos diferentes, como get, post, put, patch, delete, Então, sim, isso é sobre esse suporte do tipo JCN. Desculpe, JCNPlaceHlder. Tudo bem O que você pode fazer é que usaremos isso aqui. Está bem? Então, chegando ao nosso aplicativo aqui, tenho uma configuração de componente muito simples. Está bem? Está apenas retornando um Jex simples, que está apenas tendo o cabeçalho Está bem? Então, o que faremos é obter esses dados. Ok, então vou copiar isso aqui. Ok, imediatamente. E vou colocar isso imediatamente aqui no meu componente, mas não vou colá-lo Ok. Vou usar o gancho de efeito de uso aqui. Porque há um efeito colateral, certo? E como usamos o efeito de uso? Então, Opa, basta aparecer. Ok, então como fazemos uso do efeito de uso? Eu tenho uma função, em primeiro lugar, o. E aqui, essa é uma função que será chamada com a lógica. Ok. E então eu tenho uma vírgula com a dependência Então, qualquer dependência que eu queira adicionar, eu posso adicionar aqui Ok. Isso está feito. Ok. Esta é uma função de seta, então ela precisa ter uma seta. Tudo bem Essa é uma sintaxe que eu vou usar, ok? Agora, eu quero realizar essa operação. Então, a operação residirá nessas chaves, então vou acabar aqui e colar o código de busca Está bem? Eu vou, você pode terminar isso com um ponto e vírgula, se quiser, assim Ok, vou diminuir o zoom para que fique visível em uma única tela aqui. Está bem? Agora, uma coisa a observar aqui: estou passando uma área de dependência vazia aqui porque quero que esse gancho de efeito de uso ou esse código sejam executados na primeira montagem ou na quantidade do componente, na primeira renderização e não depois disso Quanto ao efeito das regras de uso, se você quiser que uma lógica específica seja executada na montagem do componente, você precisa passar uma matriz de dependências vazia aqui Está bem? Agora, é claro, o que isso faz é buscar isso Ele faz uma chamada de busca para esse endpoint específico. Ele obtém a resposta e converte em um JCN aqui, e então bloqueia o JCN no console usando Está bem? Então, imediatamente, o que eu vou fazer é abrir o Console aqui Ok. E eu vou te dar um aviso aqui de que essa coisa será impressa no console Por quê? Porque estamos rodando no modo estrito por aqui. Ok, Mint ch sex. Você pode ver o modo estrito. Se você quiser ver a saída apenas uma vez no monte de componentes, você deve remover o modo estrito de lá Tudo bem Então, vou guardar isso. No momento em que você salvar, você verá essa saída no console. Tudo bem Você pode ver. E você pode expandir, como verá, use o ID. Uh, título de identificação aqui e quedas concluídas. Tudo bem Então, isso está funcionando perfeitamente bem, e é assim que você pode buscar os dados e exibi-los no console. Tudo bem? Agora, é claro, exibir dados no console não é o objetivo, mas o objetivo aqui é ver como você pode usar o fetch para fazer chamadas de PA Ok, agora temos os dados em nosso aplicativo react, mas estamos apenas registrando-os em nosso console. Agora, a partir daqui, dessa parte do código, podemos levar esses dados para qualquer lugar, certo? Podemos levar esses dados para qualquer lugar, seja, se eu quiser, também posso atualizar ou definir esses dados em um estado. Está bem? E vamos fazer isso. Está bem? Então, o que eu vou fazer é ter um estado aqui. Eu vou dizer dados. Eu terei definido os dados aqui, algo assim, direi use o estado aqui e terei um MTRA como inicialização aqui Então, eu tenho esse estado de dados. Agora o que eu posso fazer é ter esse JCN aqui, certo, como entrada Então, em vez de registrá-lo no console, o que eu gostaria de fazer é dizer, em vez do registro do console JCN, eu diria definir dados, e vou passar esse JCN Assim. Está bem? E isso está feito. Está bem? Agora, se eu salvar isso, os dados não serão registrados no console, se eu atualizar Os dados não estão bloqueados no console, mas agora estão atualizados para o estado. Tudo bem? Agora está atualizado para o estado. Mas não estamos fazendo uso do estado nem o exibindo em nenhum lugar, certo? Então, o que você pode fazer é exibir os dados de busca também, certo? Então, o que eu vou fazer é vir até aqui e nos deixar ter uma lista não ordenada Então, já que estamos recebendo uma lista de valores aqui. Então, se você ver os dados, se eu fizer uma ligação aqui, ou se tivermos os dados aqui, certo? Isso é o que os dados são. É assim que está sendo enviado para nós. Assim, podemos exibir o ID do usuário, ID, o título e completá-lo. Então, o que vou fazer é ter uma lista não ordenada aqui. Vou usar um pouco de jar Script. Ok, vou dizer mapa de pontos de dados. Agora, como estamos fazendo uso da matriz, ok, vou dizer mapa de pontos de dados. Agora, aqui dentro do mapa, o que faríamos é eu dizer para fazer aqui, porque é isso que estamos buscando Ok, estamos buscando o que fazer. Ok. E então, aqui agora, estamos recebendo apenas um objeto. Está bem? O que faremos é atualizá-lo posteriormente para obter também uma lista de objetos. Ok, então não se preocupe com isso. Ok. Na verdade, eu diria aqui que, como estamos recebendo apenas um objeto, nem precisamos de um mapa. Está bem? Então, o que podemos fazer é me deixar remover isso. Está bem? Nem precisamos de um mapa, eu diria. Eu simplesmente o exibiria dessa forma. Está bem? Então, vou dizer que os dados estão tensos, e qual é a propriedade Propriedade é título, certo? Temos uma propriedade de título, então vou dizer título, algo assim. Ok. Opa, então isso estará no par de colchetes encaracolados. Você pode ver que esse é o título que estamos recebendo da API. Você pode ver. Ok, esses são os dados que estamos obtendo, certo? Você também pode exibir o ID, o ID do usuário preenchido. Está bem? Então você pode exibir o ID aqui. Ok. Também posso exibir o ID do usuário, algo assim. Ok. ID do usuário. Ok. Você pode ver que o ID é um, o ID do usuário é um. Ok. E você também pode ter algum tipo de texto aqui, ID do usuário. Tudo bem, então, ok, não, isso é identificação. Então, isso é para fazer ID em resumo. Para fazer identificação. Ok. E esse é o ID do usuário. Então, eu vou ter um ID de usuário, algo assim. E isso é para fazer o título Ok, algo assim, e você pode ver os dados, certo? E concluído ou não, isso também você pode ter aqui. Está bem? Tão completo ou não, que você também pode exibir. Ok, depende totalmente de você, mas não precisamos de um mapa porque não estamos recebendo uma lista aqui. Está bem? Então, isso é para um único conjunto de itens aqui. Agora, digamos que amanhã amanhã. Então, aqui, vou rolar para baixo. Aqui estamos recebendo a lista de tarefas. Você pode ver, estamos recebendo a lista de tarefas. Então, essa mesma lógica, você pode convertê-la em fazer aqui, certo? Você pode fazer isso, ok? Ou vamos mudar isso para postar também. Você pode alterá-lo para postar, se quiser. Está bem? Então, o que vou fazer é pegar o ponto final. Postar. Está bem? Vou adicioná-lo aqui. Ok. E vou substituir esse endpoint por isso, algo assim Vou remover isso. Ok. Isso é bem simples E agora, o que vou fazer é ter um mapa de pontos de dados porque agora estamos recebendo a lista de informações, certo? Então, eu vou ter esse mapa. Está bem? Então, primeiro de tudo, antes de adicionar o mapa, terei uma lista não ordenada Então eu vou dizer mapa de dados aqui. Ok. E aqui, eu vou dizer post. Para cada postagem, ok, eu preciso fazer alguma coisa. Está bem? O que eu vou fazer? Isso é o que vou definir aqui, ok? Para cada postagem, eu vou ter uma lista aqui, ok? E a lista terá uma chave. Está bem? Agora, qual será a chave? Qual deve ser o valor da chave? Portanto, deve ser ID. Eu terei um identificador exclusivo para a chave. Está bem? Então, eu posso dizer post dot ID aqui. Ok. Então aqui, depois de LI, terei a tag P ou tag H two, dependendo de como você deseja exibi-la. Eu vou dizer post dot title, algo assim. Ok. E então, deixe-me ver, título é um e o corpo é um. Vou dizer título, e depois P, e então você tem, uh, corpo da postagem. Então você pode dizer postt body, algo assim. Está bem? Isso está feito. Ok, agora você está recebendo o erro. Então, se você ver o erro, acho que sei qual é o erro. Provavelmente tem que funcionar ou você pode ver que o mapa de pontos de dados não é uma função. Está bem? Entendido. Então, aqui estamos definindo isso como uma matriz. Está bem? Então, vamos remover isso e eu vou definir isso como nulo aqui Ok. E vamos ver se o erro desaparece. Ok, o erro não está acontecendo. Ok, então eu descobri um problema. O problema foi definir isso como nulo. Está bem? Então, eu configurá-lo para uma matriz vazia estava certo. Está bem? Não sei por que recebi o erro ao fazer uma atualização forçada, o erro desapareceu. Está bem? Então, o código está certo. Eu coloquei essa matriz vazia corretamente inicialmente, ok, porque queremos tê-la como uma matriz porque estamos fazendo uso do mapa aqui, certo? E o mapa é um método apenas para matrizes, ok? Funciona com matrizes Agora, se você ver, depois de fazer uma atualização completa, e se eu ver aqui, você pode ver o corpo e o título da postagem, você pode ver como ela foi exibida aqui Ok. Se quiser, você pode exibir o corpo da postagem usando a etiqueta da tigela. Você pode ter B aqui. Está bem? Ou você pode ter fortes, na verdade, ok? Então eu vou dizer forte. Ok. E vou apenas adicionar o título envolto no forte e você pode ver o título e a pose aqui. Ok. Então, na verdade, estamos buscando 200 poses Ok, porque é isso que essa API diz, Ok, se você ver aqui, ela dá, desculpe, 100 poses, não 200 postagens. Está dando 100 pontos e estamos exibindo 100 poses aqui. Está bem? Usando o fetch fetch do JavaScript. Está bem? Então, como isso funciona é que, inicialmente, esse bloco de código de efeito de uso é executado na primeira montagem do componente. Por que ele é executado na montagem do primeiro componente? Por causa dessa matriz de dependências? De acordo com as regras, se a matriz de dependências estiver vazia, tudo bem, qualquer bloco de código que você tenha aqui será executado na montagem do componente uma vez Agora, o que acontece na montagem do componente, você usa fetch. Você chama esse endpoint aqui, e então você tem um conjunto Você recebe uma promessa e depois a usa aqui para obter a resposta em Jason e, em seguida, está usando a resposta para definir dados. Está bem? O que são dados definidos? Definir dados é usar dados definidos, você pode definir os dados aqui, que nada mais é do que o estado aqui. Portanto, é um conjunto de funções. Está bem? Então você tem dados com esses dados que você está recebendo do servidor. Agora, o que você faz? Você pode usar o mapa aqui para exibir os dados dessa maneira. Ok, então estamos iterando e exibindo Se estamos recebendo apenas uma postagem aqui, se você está recebendo apenas uma postagem e não a lista de postagens , você não precisa de um mapa porque não precisa iterar os dados, certo? Espero que isso esteja fazendo sentido, ok? Então é aqui que todos os conceitos do Javascript react se juntam. Ok, então quantos conceitos estamos usando? Estamos usando ganchos de efeito de uso, estamos usando o conceito de ganchos Você está fazendo uso dos estados por aqui. Você está usando o fetch from JavaScript. Você está fazendo uso de promessas aqui. E aqui, você está usando a função de mapa com matrizes e está exibindo os dados Você também está fazendo uso do sexo dela. Tudo bem? Assim, você pode ver como isso está renderizando os dados de um servidor remoto E espero que você tenha conseguido acompanhar, e espero que tenha sido útil. 6. Gerenciando eficientemente estados de carga e tratamento de erros: Oi, aí. Então, estamos falando sobre como você pode trabalhar com APIs no react E no processo, o que estamos fazendo é criar um componente muito simples que faz uma chamada para essa API para obter a lista de postagens, e estamos exibindo os dados aqui no componente. Está bem? E essa é a saída que estamos obtendo até agora. E se você quiser ver isso em tela cheia, então este é o nosso EPI, e isso é o que a saída é agora, ok? Você está vendo todas as postagens. Ok. Não se preocupe Este é este post ou em algum outro idioma. Está bem? Talvez me deixe traduzir se eu traduzir isso, diz que está em latim. Ok. Absolutamente ok. Só queremos alguns dados fictícios para trabalhar, certo? Não importa qual idioma. Ok. Então, sim, isso é post. Agora, estamos exibindo os dados. Agora, o que pode acontecer é que sempre que você está trabalhando com EPIs você está fazendo uma chamada de servidor remoto, ok? Você está fazendo uma chamada remota para alguma coisa, certo? E haverá um cenário em que os dados que você está recebendo estão demorando um pouco Portanto, é uma boa prática manipular ou ter uma interface na qual você informa ao usuário que os dados estão sendo buscados, e esse estado, podemos chamá-lo de estado de carregamento, certo Então, como você lidaria com o estado de carregamento ao fazer ou ao buscar dados de um servidor remoto Além disso, esse foi o primeiro cenário em que você gostaria de lidar com um estado de carregamento O segundo cenário é que talvez você queira lidar com qualquer tipo de situação de erro, ok? Agora, o erro pode ser como se houvesse um erro de digitação na URL ou os dados fossem buscados, mas quando você os converte em JSN, você está recebendo um erro ali, ok, porque os dados recebidos não estão no formato Como você lidaria e gerenciaria os erros nesse caso? Ok, isso é algo sobre o qual vamos falar. Então, duas coisas que estamos falando sobre como lidar com o estado de carregamento e gerenciar os erros ao trabalhar com APIs, ok? Primeiro, vamos falar sobre o estado de carregamento. Está bem? Portanto, para o estado de carregamento, podemos realmente ter uma interface de usuário personalizada ou um G six diferente que retornamos se o estado estiver carregando. Está bem? Então, o que eu vou fazer é ter um estado aqui primeiro. Eu vou dizer carregando. Ok, e eu vou dizer que configure o carregamento aqui. Ok, e eu vou dizer use state, algo assim. Ok. E eu vou ter isso. Ok. Então você pode ter isso como um booleano Esse é um estado booleano aqui, ok? O estado tem dados booleanos. Portanto, verdadeiro significa que está carregando dados no momento e falso significa que não está carregando no momento. Está bem? Então, vou inicializar isso como falso, digamos aqui Ok. Agora, o que faríamos é se o estado for verdadeiro, o que podemos fazer é não querer mostrar essa interface. Está bem? Porque se os dados estão sendo carregados, o que há nessa interface os dados de postagem que estamos obtendo do servidor. Se os dados ainda não tiverem sido buscados e estiverem no estado de carregamento , não devemos exibi-los Em vez disso, precisamos de um tipo diferente de interface de usuário, qual precisamos dizer ao usuário que, ei, os dados estão sendo carregados. Está bem? Então, o que você pode fazer é ter uma declaração aqui. Você pode dizer se, e eu direi se estiver carregando. Ok, então se o carregamento for verdadeiro, o que eu faço é voltar. Portanto, você pode ter várias declarações de devolução aqui. Ok. Então aqui você está retornando um pouco de JSX, mas se o carregamento for verdadeiro, você retorna um J six diferente aqui e o que estamos Retornaremos uma tag P simples aqui. Ok, então vou apenas adicionar uma tag P e vou dizer carregando, algo assim. Muito simples. Ok, é só uma mensagem. Não estou me estressando em criar uma interface complexa, mas você também pode definir algo complexo aqui. Isso é o que isso significa. Está bem? Agora, aqui, isso não está sendo renderizado porque o estado é falso, certo? Então, no momento em que eu mudar o estado para verdadeiro, se eu salvar isso, você verá o carregamento sendo exibido. Certo? Carregar significa que ele ainda está sendo carregado e os dados ainda não foram buscados Está bem? Então é isso que o usuário verá quando os dados forem buscados, certo? E estamos alterando manualmente isso verdadeiro para falso e falso para verdadeiro, certo? E estamos vendo se está funcionando bem. Está bem? Portanto, isso não está recebendo nenhum tipo de erro, isso é perfeitamente válido. Você pode ter várias declarações de retorno, mas elas devem ser condicionais Como se isso fosse condicional, certo? Você não pode simplesmente devolver a declaração aqui. Ok, na verdade é uma função, certo? Isso se torna inacessível porque você está voltando para cá, certo Então, não faz sentido porque essas são funções de script Ja aqui, nada mais, certo? Então você pode ter esse tipo de retorno. Você pode dizer se está carregando e devolver isso, ok? Agora, o que eu preciso fazer é quando os dados estão sendo buscados, eu preciso definir o valor para carregar o estado para carregamento aqui Está bem? Então, o que eu vou fazer é aqui, inicialmente, dizer que o estado é falso, ok. E dentro desse efeito de uso aqui. Então, quando os dados estão sendo buscados, ok? Eu vou dizer que está carregando. Está bem? Então, quando estamos configurando os dados aqui. Então, inicialmente, quando o carregamento começa dentro desse efeito de uso, posso dizer que defina o carregamento como verdadeiro. Algo parecido com isso. Ok. E então, uma vez que os dados são buscados aqui. Então, quando os dados do conjunto estão sendo chamados aqui, quando o carregamento é concluído, podemos ter, podemos adicionar isso ao Cibras porque agora estamos adicionando mais de uma instrução e aqui eu posso dizer que set loading to that off pode dizer set loading to the of falls porque o carregamento está concluído, certo? Ok. Então é assim que você pode gerenciar o carregamento. Agora, se você salvar isso, se estiver atualizando, verá o carregamento sendo exibido quando a chamada EPA estiver Você pode ver, você pode ver. Isso acontece por quase um segundo porque o EPA é rápido, é claro Ok. Mas se a API estiver demorando um pouco, é claro, ela ficará lá por um tempo. Então, o que estamos fazendo? Estamos gerenciando o estado de carregamento com a ajuda de um estado aqui, ok? Estamos exibindo o carregamento com a ajuda de um estado. Temos o estado de carregamento definido com o valor padrão de quedas e, em seguida, temos essa interface de usuário que, se o carregamento for verdadeiro, retorne esse JSX, ok Você pode modificar isso para o que quiser. Você pode ter um CSS personalizado definido para isso. A escolha é totalmente sua. Mas como isso está sendo exibido e escondido? Primeiro no gancho de efeito de uso, a primeira coisa que estamos fazendo é definir o carregamento como verdadeiro. E então estamos configurando o carregamento para quedas. Agora, se você perder uma vez que os dados são buscados e atualizados no estado, estamos configurando o carregamento para fols para que os dados Se você perder essa etapa por algum motivo, configurando o carregamento para dobras, ele ficará preso quando o carregamento for verdadeiro Mesmo que os dados sejam colocados aqui para dentro do estado aqui, certo? Você não está atualizando o estado que você tinha aqui inicialmente. Preciso atualizar isso. E no momento em que eu atualizo, você verá os dados sendo buscados E isso dá uma boa indicação para o usuário de que os dados estão sendo carregados, se o EPI demorar Então, é assim que você pode gerenciar o estado de carregamento ao trabalhar com chamadas de API. Está bem? Agora vem a segunda parte, que é o tratamento de erros. Está bem? Agora, tratamento de erros, é evidente que, se você estiver trabalhando com EPIs, erros podem acontecer, certo? Então, o que eu vou fazer é ter mais um estado aqui. Vou dizer const, vou dizer error e vou dizer set error, e vou dizer use State para null. Ok. Então, inicialmente, o erro é nulo. É um estado que estou criando aqui. Está bem? Como afirmei para carregar dados e erros. Tudo bem E o que vou fazer é aqui, eu tenho isso então, esse é o DN que é executado quando os dados são recebidos no formato JSN Ok, o que eu posso fazer é adicionar mais uma etapa aqui. Eu posso dizer pegar. Ok. Você pode dizer captura aqui, e eu posso dizer erro, detectar o erro e você pode realmente gerenciar o erro aqui. Está bem? Então, eu posso dizer console dot Log over here primeiro. Eu posso registrar o erro. Eu posso dizer, uh, ok. Deixe-me usar os modelos. Ok, então eu vou dizer erro ao buscar dados. Ok. E eu posso simplesmente ter as informações do erro aqui. Sendo preterido. Ok, isso está feito. Ok, eu perdi o ponto e vírgula, então vou adicionar um ponto e vírgula Ok. Vou diminuir um pouco o zoom. Então, isso é visível na visualização única. Então, eu tenho esse erro de ponto do console. Então eu posso dizer erro de configuração. Ok, defina o erro e posso atualizar o erro aqui. Posso atualizar as informações do erro no campo para buscar os dados Então essa é a mensagem que você quer mostrar para o usuário Estou configurando isso, ok? E eu estou dizendo que defina o carregamento para o de quedas, ok? Você também precisa atualizar o carregamento para cair aqui, porque inicialmente você definiu o carregamento como verdadeiro. Direto no efeito de uso. Está bem? Então, uma vez que os dados são carregados, você os configura para quedas e, quando há algum tipo de erro, você configura o carregamento como decrescente porque o carregamento acabou, certo? Então, você precisa atualizar o estado. Está bem? E precisamos exibir o erro para o usuário. Se você quiser, você pode exibir. Então, o que vou fazer é adicionar algo assim. Eu posso dizer se há um erro aqui. Vou exibir o erro. Vou simplesmente exibir o erro. Eu posso dizer erro, assim. Está bem? Agora, se você atualizar, você não receberá nenhum tipo de erro aqui, ok? Mas o que você pode fazer é, na verdade, criar um objeto de erro personalizado e você pode realmente lançar o objeto de erro e ver como o erro está acontecendo. Isso é algo que você pode fazer aqui. Ok. Então, uma vez que os dados estão sendo recuperados aqui, o que você pode fazer é dizer um novo erro ou dizer lançar um novo erro Você precisa lançar o erro, lançar um novo erro. Ok. Digamos que você tenha recebido esse erro ao passar o GSN Então você pode dizer: Opa. Então isso vai sair. Você pode dizer que algo deu errado. Algo deu errado, algo assim, e você pode salvar isso. Você pode ver uma falha na busca de dados, certo? Porque estamos lançando um erro personalizado aqui manualmente, tudo bem, para simular a situação de erro. Tudo bem E se você acessar o Console, deverá ver um erro sendo exibido. Você pode ver um erro ao buscar dados Algo deu errado neste slide Está bem? Você também pode ver a mensagem. Está bem? Agora você está fazendo o log de pontos do console. Você pode cometer o erro de pontos do console. Essa é uma boa prática por aqui. Quando se trata de erros de registro. Agora, se você atualizar, verá o redo sendo exibido em vermelho Certo? Então é assim que funciona, e está funcionando duas vezes porque estamos em um modo estrito, é claro Então, sim, é assim que você pode gerenciar o erro aqui. Está bem? Espero que isso esteja claro e forneça uma boa indicação de como você pode criar aplicativos fáceis de usar porque, você sabe, coisas como o EPI demorando para carregar ou as respostas demorando para serem renderizadas ou qualquer tipo de erro Todas essas são situações normais. Esses são todos os casos H que podem acontecer. E, claro, quando você cria aplicativos dinâmicos que consomem APIs, é importante saber como lidar com isso Tudo bem? Espero que isso seja útil e que isso lhe dê um bom conhecimento sobre como você pode trabalhar com APIs Então, sim, é só isso. Te vejo em breve. 7. Simplificando chamadas de API no React com o Axios: Olá, aí. Então, agora é hora de começarmos a falar sobre Axis. Agora, o que é Axis? O Axis é um cliente HTTP baseado em promessas para JavaScript. Está bem? Agora, quando digo JavaScript, significa que ele roda no navegador, no nodejs, no react e tudo mais. Tudo bem? Agora, este é o site oficial do axisxshttb.com, e você pode Uma simples biblioteca Axis de pesquisa do Google ou em qualquer lugar, como no Google ou em qualquer mecanismo de pesquisa favorito de sua escolha, você verá este primeiro link aqui, que é a introdução do documento HTDP da Axis Ok, então esta é a URL aqui. Se você acessar este site, verá alguns detalhes sobre o que é a Axis. E no lado direito, você pode ver um código que é uma demonstração de como a Axis funciona. É uma simples solicitação de obtenção que está sendo feita. Certo? Agora, axis e fetch, ambos são os métodos populares para fazer solicitações HTDP Mas há algumas razões pelas quais o acesso está sendo usado. O acesso é simples. Tem um conceito de interceptores, ok? Então, interceptores significam que se, por exemplo, se todas as chamadas de API em seu aplicativo também precisam ter um token OT ou algum tipo de cabeçalho consistente em todas as chamadas de API , o que você pode fazer é ter o conceito de interceptores em que você pode ter um tratamento centralizado desses São interceptores, ok? Então, sim, o acesso também é bastante popular com o Fetch. Portanto, o Fetch é uma forma embutida de fazer chamadas de API. O Access é uma biblioteca. Ok, então você vem aqui nesta página. Se você disser começar, será direcionado para esta página, onde verá alguns dos recursos do axis. Você pode ver ele tem uma maneira de interceptar solicitações e respostas usando interceptores Você pode fazer todo esse tipo de suporte à API prometida. Eu posso transformar dados de solicitação e resposta. Você também pode cancelar a solicitação. Há tempos limite. Está bem? Portanto, oferece um pouco mais de flexibilidade em comparação com a busca aqui Está bem? Você pode ver a configuração limites de largura de banda para a cadeira de nós Tratamento automático de JSN na resposta, ok, postando formulários HTML como JASN Tudo isso. Agora, isso não está disponível por padrão. Você precisa instalar este pacote NPM installed axis. Está bem? Se você estiver usando BR, você pode fazer uso disso. Então, para o NPM, isso é um comando para BoA, isso é um comando, e para Yarn isso é um comando, ok Há outras maneiras de usá-lo usando essas tags de script aqui. Está bem? Agora, se você der uma olhada no exemplo aqui no lado esquerdo, se você clicar neste botão de exemplo, você verá que é assim que você pode usá-lo. Está bem? Você pode ver que esse é o código para fazer uma solicitação get e lidar com a resposta, detectar o erro e, finalmente, ter também. Ok, o finally é sempre executado, independentemente de a solicitação ter sido bem-sucedida ou não OK. Então, isso é uma demonstração aqui. Vamos experimentar um exemplo prático aqui para eixo e veremos como podemos usá-lo em nosso projeto. Tudo bem? Eu tenho um projeto simples aqui, ok, onde o que estou fazendo é na verdade, ter uma chamada de API aqui usando fetch Ok, estou gerando um erro personalizado, que vou desativar. Então, se não houver erro, você verá, ok, então ainda estou vendo um erro aqui. Então eu fiz uma atualização completa, e funcionou, na verdade, ok? Então, acabei de comentar esse erro personalizado que eu estava gerando, e essa é a saída. Então você pode ver o estado de carregamento aqui, ok, carregando. E estamos gerenciando o carregamento e o erro aqui. Se houver algum tipo de erro, estamos exibindo isso. E estamos gerenciando todos esses três carregamentos de dados e erros com a ajuda de estados, e estamos usando o fetch aqui, ok? Agora vamos transformar essa coisa, eu diria em eixo. Agora, a primeira coisa que precisamos é acessar um terminal, então vá até o terminal aqui. OK. Isso fornecerá um terminal no diretório de trabalho atual. Assim, você pode digitar PWD e ver onde está. Na verdade, estou no meu projeto aqui. OK. Eu vou dizer claro. E agora você podia ver esse comando aqui, onde dizia: É assim que você pode instalar o eixo. Vou copiar esse comando porque estou usando o NPM E vou passar isso aqui. OK. Agora, isso adicionará o NPS. Desculpe, isso adicionará eixo ao meu aplicativo aqui. Está bem? Portanto, foi adicionado com sucesso. OK. E o que eu faria é que você pudesse confirmar isso indo até o pacote dot Hans aqui, e eu vou experimentar este terminal aqui. Você pode ver que o eixo foi adicionado como dependência, ok? Então, sim, isso foi feito e o eixo agora está disponível para nosso uso. Agora, a primeira coisa, se você estiver usando o eixo, também precisará importá-lo. Então, adicionarei uma declaração de importação na parte superior. Eu vou dizer que o eixo de importação e ele é sugerido automaticamente e concluído automaticamente Está bem? Então, estamos obtendo essa instância do eixo aqui. Agora, o que precisamos fazer é, em vez de buscar, transformar isso em eixo, certo? Então, em vez de vir até aqui, está bem? Eu vou dizer eixo. Tot, venha aqui. Está bem? Isso é o que é. Está bem? Eu direi então, responda. E quando a melhor coisa está aqui, estamos convertendo a resposta para JCN Com a Axis, você não precisa fazer isso. Ok, você recebe a resposta como a própria JSN. Então, se você vier aqui, verá um dos recursos de tratamento automático de dados da JCN na resposta, certo? Então isso é uma coisa boa. Então, aqui, esse único passo desaparecerá, ok? Isso vai sumir por aqui. Aqui, em vez de Chasin, podemos simplesmente renomear essas duas respostas Eu poderia dizer uma resposta, algo assim. Eu vou dizer definir dados. Definir dados é resposta. Agora, essa resposta é, na verdade ter essa resposta como um objeto e tem um atributo de dados. Você precisa acessá-lo dessa forma, dados de pontos de resposta. Está bem? E você também pode fazer um registro do console para responder e ver o que ele imprime. Eu só vou fazer isso. Registro e resposta do console aqui. OK. Verificaremos os registros do console em breve, ok? Mas é assim que funciona e você pode definir as dobras de carregamento. Você tem uma pegadinha em que está detectando o erro, e o resto das coisas são as mesmas aqui, ok? E, sim, acho que deve funcionar perfeitamente bem. Vou guardar isso e vou fazer algo difícil ou fresco. OK. Você está vendo a saída. Agora, se você for até o console, veremos, então deixe-me ir até o console, deixe-me diminuir um pouco o zoom. OK. OK. Então, tudo bem. Agora aqui, se você ver se eu expandir isso, ok, você pode ver o objeto sendo impresso, ok? Ou deixe-me passar para a tela cheia, tudo bem, seria melhor lá. Está bem? Então essa é a saída aqui. Está bem? Deixe-me ir inspecionar. Agora diga Console. Agora, você pode ver o objeto sendo impresso. Agora, este é o objeto, ok, que obtemos Este é um objeto de resposta, na verdade, certo? E isso tem dados. Você pode ver esses dados. Então, se você quiser acessar os dados da API que você tem, você pode realmente dizer dados de pontos de resposta. Ok, é assim que ele gerencia isso, e cabeçalhos são basicamente os cabeçalhos que você tem alguns dados de configuração Está bem? Você tem algumas informações relacionadas à solicitação. Você tem status. Então, se você quiser acessar o status, qual é o status da solicitação ou resposta? Você pode dizer o status do ponto de resposta. Você pode lidar com isso dessa maneira. Está bem? Então, sim, o objetivo é mostrar a aparência dos dados de resposta se você estiver usando o Axis e precisar usar os dados de pontos de resposta aqui. Está bem? Então, sim, é assim que você pode começar a usar o eixo. E espero que isso esteja bem claro. Você também pode lidar com o erro dessa forma, se desejar, você pode ver, falhar na busca de dados E se você vier aqui, ok, você verá um erro ao buscar dados, algo deu errado Está bem? Essa é a mensagem de erro que passamos. Está bem? Você pode ver que algo deu errado, certo? Então é assim que as coisas funcionariam. Vou apenas comentar isso, ok. Mas sim, este é o eixo para você e espero que você esteja bem claro sobre o que é eixo e como você pode usá-lo. 8. Executando várias solicitações GET simultaneamente: Então, vamos começar a falar sobre como você pode acionar várias solicitações Get com eixo, ok? Então, aqui estamos usando o eixo para acionar esse ponto final Ok, esse é o ponto final do post. E se você vier aqui, ok, este é o espaço reservado de Jason dotpco.com E aqui, estou acionando esse primeiro endpoint. Quero acionar mais um endpoint, digamos, usuário, vou abrir isso em uma guia separada e você pode ver que esses são os dados que eu devo obter Ok, então digamos que eu queira acionar essa chamada de API também. Como eu faria isso? Está bem? Então, aqui, o que faremos é aqui, eu vou dizer ponto do eixo tudo em vez do ponto do eixo Get, ok? Ou podemos manter o eixo dot Get e teremos que mover essa chamada Get para o eixo ponto O. Ok ? Então, ponto do eixo O, algo assim. Agora, o que o ponto do eixo O faz é aceitar uma matriz, ok? E eu vou cortar isso aqui, cortar isso. E eu vou mover isso dentro dessa matriz aqui. Está bem? Então, deixe-me alinhar isso um pouco melhor OK. Deixe-me alinhar isso Bem, ok, temos isso aqui. OK. E então você tem então aqui, que também estava lá no início. Está bem? Mas agora você está fazendo essa única chamada de EPI aqui O que vou fazer é copiar isso. Vou adicionar uma vírgula aqui. No final das contas. Vou adicionar mais uma chamada de EPI, copiar esse endpoint do usuário aqui e substituir essa segunda chamada pelo endpoint do usuário, algo assim Agora você pode ver o ponto do eixo O. Vou apenas diminuir o zoom, o ponto do eixo O aqui, e estamos fazendo duas chamadas de EPI separadas, como você pode ver Tudo bem, vou estender isso. Então você pode ver que é assim que está indo, ok? Agora, o que faríamos é fazer isso antes, e de vez em quando temos uma resposta, ok? Então, agora precisamos ter uma maneira de lidar com a resposta de ambos separadamente, ok? E para isso, usaremos a dispersão de pontos no eixo. Você pode ver a dispersão dos pontos do eixo. Está bem? O que é a dispersão de pontos no eixo? Então, função de propagação de pontos do eixo. Então, a propagação é uma função que permite que as respostas sejam tratadas separadamente, ok? Agora podemos passar a postagem e os usuários como um parâmetro para corresponder às respostas da postagem e dos pontos finais dos usuários separadamente. Deixe-me mostrar isso para você como você pode fazer. Então, aqui, em vez da resposta, vou me livrar da resposta aqui, e podemos ver aqui, postar Ok e os usuários. Está bem? Isso é algo que você pode fazer aqui. Você verá todas as marcas vermelhas aqui, é claro, porque você está fazendo uso da resposta e a resposta não existe Então, vou pegar essa postagem aqui e vou substituir a resposta pela postagem, algo assim. Ainda estou vendo uma marca vermelha aqui. Ok, eu entendi. Então, espalhe, basicamente, tudo isso tem que estar dentro do spread. Está bem? Então, algo assim. Então, sim. Espero que isso esteja fazendo sentido. Então, aqui, Spread está levando tudo isso para cá, ok? E você tem postagens e usuários aqui. Está bem? A postagem é basicamente a resposta da postagem, e o usuário é basicamente a resposta do endpoint do usuário aqui. Está bem? E o spread nos permite lidar com esses dois separadamente, ok? Então, estou logando na postagem aqui. Também vou registrar as informações do usuário aqui. OK. Deixe-me dizer usuário Ok, usuários. Deixe-me salvar isso. Você pode ver que a postagem está funcionando perfeitamente bem. Está bem? Realmente ótimo. Vou até lá para inspecionar, ou deixe-me fechar essa inspeção Não aqui, mas terei essa visualização em tela cheia e atualizaremos Você pode ver a postagem sendo exibida. Eu posso inspecionar, console. Você pode ver o objeto sendo impresso quatro vezes, porque cada objeto está sendo impresso duas vezes devido ao modo estrito. Então aqui você está vendo esses dados aqui. Esses são os dados da postagem. Está bem? Essa é a primeira coisa, publique dados. E então temos os dados da postagem novamente. Ok, então isso é um dado do usuário, você pode ver. Essa é uma informação do usuário que está sendo buscada. Esses são os dados da postagem novamente, 100 e essas são as informações do usuário, novamente, que são dez usuários, certo? Então, sim, é assim que você pode lidar e trabalhar com várias chamadas de API. E esse é um dos recursos ou uma das flexibilidades que a Axis nos oferece. Está bem? Você tem esses dois dados. O que você pode fazer é decidir o que quer fazer. Você pode armazenar as informações relacionadas à postagem em um estado, armazenar as informações relacionadas ao usuário em outro estado e exibi-las aqui. Você também pode renderizá-lo na interface do usuário. Está bem? Mas sim, até agora tudo bem, podemos fazer várias chamadas de API com a ajuda da Axis, e espero que isso esteja bem claro para todos vocês. 9. Enviando dados com solicitações POST no Axios: Então, agora é hora de começarmos a falar sobre como você pode usar a solicitação post em seu aplicativo react? E para isso, aqui no Jason Please holder, se você rolar para baixo. Ok, aqui você encontrará esse EPI ou esse endpoint aqui, que permite fazer uma solicitação de postagem Está bem? Então, no slash Post, se você fizer uma solicitação de postagem, tudo bem, ele a aceitará E aqui você tem um guia para um exemplo de uso. Então, vou até o guia de exemplos de uso e vou rolar para baixo até aqui. Ok, você pode ver esse exemplo aqui, ok? Então, criando um recurso, ok? Então, o que ele vai fazer é fazer uma solicitação de postagem. Você pode ver que o método é postado. Esse é o corpo que você está enviando, os cabeçalhos, e é assim que você gerencia a resposta Agora, a resposta que você receber, ok, você receberá o que enviou, junto com o ID aqui. aqui, essa é uma API falsa, então o recurso não será realmente atualizado no servidor, mas será falso como se fosse. OK. Então, o que faremos aqui é que eu virei aqui. OK. E aqui, o que precisamos é de um formulário. Então, aqui, vou criar um formulário, vou dizer formulário, algo assim, e o formulário não terá nada. Vou ter apenas um botão que apenas acionará uma solicitação de postagem. Então eu vou dizer tipo de botão, vou dizer enviar aqui. Ok, e eu vou dizer adicionar postagem, algo assim. Está bem? Você tem esse botão aqui, ok? Agora, ao clicar aqui, queremos que a solicitação de postagem seja acionada. Está bem? Então, vou dizer sobre o envio aqui no envio. Agora eu preciso adicionar uma função. Preciso vincular isso a uma função, então vou dizer handle, submit. OK. Isso ainda não existe. Claro, precisamos criar isso, certo? Então, aqui, o que vou fazer é criar essa função const on submit Está bem? Então, vou dizer const ao enviar Algo parecido com isso. Oh, desculpe, não envie, manipule o envio. Não está no nome de envio e envio, algo assim. Eu vou dizer evento. Então, ele aceitará o evento aqui, e eu tenho essa definição de função aqui, algo assim. OK. Tudo bem, agora eu preciso da lógica aqui para basicamente lidar com a solicitação de postagem Está bem? Então, o que eu vou fazer é primeiro criar uma nova postagem, ok? Agora, quais são os dados que eu preciso enviar são o corpo do título e o ID do usuário. Isso é o que eu preciso enviar, certo? Então eu vou copiar isso e eu vou vir aqui, ok. E aqui, vou dizer const, nova postagem, e vou criar uma postagem, menos assim. Está bem? OK. Vou manter isso em várias linhas. Está tudo bem. Ok, algo assim. Ok, então esse é o post. Isso é o que eu diria. Esse é o objeto que eu quero postar, certo? Portanto, o título é fu, o corpo é bar e o ID do usuário é um. Está bem? Agora, o que podemos fazer aqui é isso: depois que isso for criado, terei um eixo sendo usado. Então, adicionarei um eixo e você poderá ver a seção de importação sendo adicionada na parte superior Então, vamos fazer uso do eixo. Eu vou dizer axis dot Post. OK. E a postagem é um método que usaremos. Preciso passar a URL aqui e, em seguida, preciso usá-la para lidar com a resposta. Opa. Então, para lidar com a resposta, algo assim. OK. Então aqui, o que eu faria é precisar do Ok, eu preciso fechar isso também aqui. OK. E eu vou me livrar desse suporte aberto. Ok, fechando o suporte. Então, dentro da postagem, preciso passar a URL e o novo objeto da postagem. Então eu vou vir aqui. Esse é o novo objeto da postagem. OK. Então, vou mencionar isso aqui. E no final, vou dizer uma nova postagem com vírgula. Então esse é o objeto que estou passando. Ok, algo assim. Deixe-me ver isso em tela cheia. Tudo bem. Vou usar tela cheia para que você veja tudo. OK. Você pode ver o poste de pontos do eixo aqui, e eu estou passando o novo objeto poste, junto com isso. E agora, então, o que eu preciso é dizer resposta, ok, função de seta. E aqui, agora preciso lidar com a resposta. Está bem? Como estou lidando com a resposta? Vou apenas dizer que o log de pontos do console está aqui, ok? E eu vou dizer que uma nova postagem foi adicionada. Algo assim, e vou dizer apenas dados de pontos de resposta. Está bem? Gostar. Ok, então eu vou dizer definir dados, opa Ok, então os dados do conjunto não existem. Precisamos adicionar um estado aqui. Está bem? Então, o que vou fazer é dizer const data e vou dizer set data Vou fazer uso do estado de uso aqui. OK. E aqui, o que faremos é chamar dados do conjunto, algo assim. E aqui, eu vou dizer a resposta. Coloque pontos nos dados e vírgulas e eu vou desestruturar os dados, algo assim. Tudo bem. Então isso está feito, eu acho, tudo bem. Sem problemas como tal. E sim, o identificador de envio também está vinculado a isso. OK. Então, agora deixe-me minimizar isso. E aqui, vou fazer uma atualização, uma atualização rápida. abriremos o console para ver qual saída obtemos. E eu vou dizer para adicionar uma postagem aqui. OK. No momento em que digo no post, opa, não estou vendo nada Ok, então eu também preciso dizer ponto E, evitar evitar o padrão, evitar o padrão. Então eu preciso dizer isso, e agora vamos tentar isso. OK. Então, vou dizer postagem publicitária. Opa Então, diz que os dados não são iteráveis. Também estou recebendo um erro aqui na linha 16 aqui. Está bem? Portanto, o problema são os dados dos pontos de resposta, e eu estou desestruturando os dados Está bem? Então, isso está gerando um erro e o erro é uma promessa não codificada. Os dados não são irtratáveis. Então, o que eu faria é me livrar dessa coisa aqui, isso. OK. E eu vou guardar isso. Deixe-me fazer uma atualização. OK. Então, eu me livrei dessa parte aqui. OK. Agora isso é bem simples. Vou dizer adicionar postagem e você poderá ver, ok, a postagem que está sendo adicionada e qual postagem está sendo adicionada e que também está sendo exibida aqui. Tudo bem. Então, sim, é assim que uma solicitação de postagem funcionaria quando você está trabalhando com a Axis. Está bem? É bem simples Vou usar a tela cheia para que você tenha uma visão melhor. Vou ampliar um pouco. OK. Estamos fazendo uso. É aqui que está o ponto crucial, ok? Então você diz axis dot post, especifica a URL e o objeto que você deseja publicar. Está bem? E então você tem o tratamento aqui, e você lida com a resposta que você recebe. Tudo bem. Então, sim, isso é sobre a solicitação de postagem com eixo. Espero que tenha sido útil e espero que você tenha conseguido acompanhar. 10. Otimizando a segurança de API com Interceptors Axios: Então, agora é hora de começarmos a falar sobre interceptores e entender o que eles são Agora aqui, eu tenho um exemplo já escrito, onde eu tenho esse cabeçalho e um botão para adicionar um post, ok? E quando eu clico em Adicionar postagem, ele faz uma solicitação de postagem para um servidor remoto, e você pode ver os dados sendo postados no console. Após a resposta bem-sucedida da solicitação de postagem, tudo bem? E você verá isso acontecendo várias vezes. OK. Estamos usando essa API falsa aqui, que é o espaço reservado para Jason, e se você rolar para baixo, estou usando a API de postagem aqui Essa é uma delas, ok? Voltando ao código aqui, está bem? Essa é a base do código. Agora, o que são interceptores e por que você precisa deles? Está bem? Agora, os interceptores são coisas com eixos que permitem executar código personalizado ou interceptar a solicitação, antes que ela seja tratada até então ou capturada Espero que isso esteja fazendo sentido. Então, os interceptores não são nada, mas permitem que você intercepte a solicitação antes que sejam aceitos ou detectados, ok Agora, por que você quer fazer isso? Portanto, talvez você queira ter algum tipo de código personalizado para executar antes do envio de uma solicitação ou após o recebimento de uma resposta. Está bem? Agora, o código personalizado pode envolver coisas como adicionar um token de autenticação ou qualquer coisa desse tipo, ok? Então, nesse caso, esse conceito de interceptores entra em cena, certo? Então, deixe-me dar uma demonstração de como você pode usá-lo. Está bem? Então, aqui no topo, digamos, eu vou ter um interceptor Eu vou dizer eixo tot eu vou dizer interceptores. Você pode ver o interceptor de propriedades e solicitar que use Está bem? Então você tem utilidade aqui, ok? Agora, dentro do uso, o que você faria é, isso é o que vamos usar. Por aqui, vou ter a função de seta. Eu vou dizer pedido. Está bem? Para cada solicitação, você me dá um registro do console, ok? O log do console deve estar iniciando a solicitação, ok? Algo parecido com isso. OK. Agora vou guardar isso, ok? Agora, se eu vier aqui, se eu abrir o console, deixe-me limpar o console. Deixe-me fazer uma atualização. OK. Agora, se eu disser adicionar postagem, você verá a solicitação inicial. Opa, há algum erro aqui. Está bem? O erro diz que não foi capturado na promessa, erro de tipo, ok? Então eu recebi o erro. O erro é que temos que retornar a solicitação aqui. Está bem? Isso é um erro que eu cometi. Se você vier aqui, se você atualizar, limpar, e se eu disser na postagem, você verá a solicitação inicial de nova postagem adicionada, ok? Então lembre-se de devolver isso aqui. Está bem? Então, sim, isso será interceptado e impresso para cada solicitação aqui Você pode ver. Para cada solicitação, você está vendo uma solicitação inicial, certo? Você tem acesso ao objeto de solicitação que pode imprimir aqui. Então, eu posso fazer o pedido aqui. OK. Se eu vier aqui, eu atualizo, se eu disser adicionar postagem, você pode ver que tenho acesso a todo o objeto de solicitação aqui Posso adicionar ou remover qualquer tipo de cabeçalho personalizado que eu quiser Está bem? Então, posso dizer que solicite cabeçalhos de pontos, posso usá-los dessa forma e personalizar Eu posso adicionar Eu posso adicionar qualquer tipo de token. Então, por exemplo, se algum tipo de solicitação for autenticada, certo, talvez você precise passar o token do armazenamento local, certo? Agora, onde quer que você esteja usando a Axis, seria muito complicado fazer isso, Assim, você pode ter um interceptor definido. Globalmente. E sempre que alguma solicitação está sendo acionada para o servidor, você pode ter uma lógica aqui em você acessa o armazenamento local, obtém o token que deseja passar para o servidor e pode formatá-lo aqui e adicioná-lo ao cabeçalho Assim, você pode definir cabeçalhos de pontos de solicitação, adicionar o token e mantê-lo lá Então, o que aconteceria é que para cada solicitação, o token é adicionado porque isso é padrão, certo? O servidor precisa disso. Assim, você não precisa replicar esse código em todos os lugares É assim que isso ajuda, ok? E isso é um interceptor de solicitações. Eu tenho um interceptor de resposta que eu quero te mostrar também Está bem? Então, interceptores de pontos do eixo , ponto, seria uma resposta, se você acertar Você tem que dizer use aqui. Opa, vamos dizer use, e vamos fazer uso disso, ok? E aqui você verá a resposta, e você pode ter algo assim. Você fará um registro do console aqui. OK. Você pode dizer a resposta. OK. Opa. E aqui, você pode dizer a resposta. Assim. OK. E aqui, retorne a resposta. Algo W. Tudo bem. Então, isso é para cada resposta, você também tem acesso à resposta. Está bem? Então, deixe-me atualizar. Claro. Eu vou dizer adicionar postagem. Você pode ver a solicitação inicial. Você tem o objeto da solicitação, a resposta, dados da resposta e, em seguida, está vendo isso sendo impresso. Agora, de onde isso está sendo impresso? Isso está sendo impresso a partir de então por aqui. Você pode ver. Então essa coisa foi executada no final. Está bem? O que isso significa é? Isso significa que o interceptor é chamado primeiro sempre que a resposta é recebida e, em seguida, os dados são processados Você pode ver aqui. Portanto, essa parte é executada primeiro sempre que a resposta é recebida e essa parte é executada antes que os dados sejam enviados ao servidor. Está bem? Então, espero que esse conceito de interceptor esteja claro e espero que você tenha uma boa compreensão de como isso funciona Você pode brincar com isso e dar uma olhada nos dados que estão sendo interceptados, e espero que tenha sido esclarecedor 11. Construindo instâncias personalizadas do Axios para melhor controle: Oi, aí. Então, agora é hora de começarmos a falar sobre a instância de eixo personalizada. Agora, o que é uma instância de eixo personalizada? Então, aqui estamos fazendo uso do eixo, ok? Mas com o axis, você pode criar uma instância de acesso personalizada que é versão pré-configurada do axis para seu aplicativo E ao criá-lo, você pode definir opções padrão, como cabeçalhos de URL base, qualquer tipo de cabeçalho padrão necessário, qualquer tipo de configuração de tempo limite que você deseja que a solicitação em seu aplicativo Então, todos esses tipos de configurações globais, você pode, com a instância de eixo personalizada e cada chamada de API que todo o aplicativo fará em todos os componentes usar essa instância de eixo personalizada, certo? Então, por exemplo, deixe-me dar um cenário. Então aqui você tem essa solicitação de postagem. Talvez eu tenha mais uma solicitação Get aqui neste mesmo componente. Agora, eu posso ter milhares de componentes, certo? Centenas de componentes, digamos , nesse caso específico, digamos que pelo menos 50 componentes tenham chamadas de API. Certo? Então, se eles tiverem chamadas de EPI, você repetirá todo esse URL ali Está bem? Isso não é bom, ok, porque amanhã, se a URL do servidor mudar, não será bom. Se algum tipo de parâmetro mudar, ok, você tem que fazer alterações em todos os arquivos lá. Está bem? É melhor ter todo o código comum relacionado à configuração em um arquivo para que, se houver algum tipo de alteração, você possa alterá-lo em um só lugar e, em seguida, tudo seja propagado, certo? Então é aqui que a instância de acesso personalizado entra em cena. Então, para criar uma instância de acesso personalizada, vou mostrar como ela funcionará, ok? Então, aqui estamos fazendo um post EPI. O que podemos fazer é dizer const API. Você pode chamar isso do que quiser, mas eu gosto de chamá-lo de API. Você pode dizer eixo, ponto, criar aqui. Está bem? É assim que estamos criando a instância do eixo personalizado e, dentro disso, você pode ter toda a configuração definida. Tudo bem? Agora, todas as configurações que você pode ter aqui. Está bem? Então, por exemplo, aqui para essa coisa, o que eu posso fazer é conseguir isso. Eu cortei isso e aqui, vou dizer p URL. Você pode ver o PacerL. Você pode dizer dois pontos, eu posso adicionar uma PRL aqui, algo assim Está bem? Opa. Então, sem calafrios, eu quero isso OK. Esse é o URL base para todas as solicitações de API. Está bem? Então eu posso ter cabeçalhos aqui. Você pode ver essa propriedade de cabeçalhos. Posso dizer nos cabeçalhos que quero que os cabeçalhos padrão aqui sejam como todos os cabeçalhos padrão que você pode ter Então, digamos que eu queira ter autorização aqui, ok e eu gostaria de ter, digamos, portador e você pode adicionar algum token aqui, ok? Então, qualquer token que você tenha, você pode adicioná-lo. Ok, e enviado é enviado junto com a API, ok? Você definiu isso. Como você faz uso disso? Está bem? Então, o que você pode fazer aqui é, em vez de usar o axis dot post aqui, você pode dizer API, algo assim , api dot post, e isso vai funcionar, vai usar isso como BCRL e vai garantir que esses cabeçalhos estejam presentes, Se eu salvar isso e você vier aqui, Ok, eu tenho esse aplicativo instalado e funcionando. Ok, você tem esse botão aqui, que acionará uma solicitação de postagem. Agora, se eu disser adicionar postagem, ok, você pode ver uma nova postagem sendo adicionada. Tudo bem. Portanto, não estou vendo que isso está funcionando bem, mas não estou vendo a solicitação sendo impressa aqui. Está bem? Então isso é algo que eu posso imprimir. Está bem? Deixe-me imprimir isso também, ok? Então, para imprimir a solicitação, o que vou fazer é adicionar uma interceptação aqui, ok? Então, adicionamos interceptores dessa forma, eixo, interceptores, solicitação de pontos, uso de Tt aqui, algo assim Está bem? É assim que você normalmente adiciona interceptores OK. Mas como estamos usando instância de eixo personalizada, o que você pode fazer é, em vez do eixo aqui, dizer interceptores de pontos de API Está bem? Isso é o que você vai fazer. Tudo bem. E aqui, você vai dizer pedido aqui. OK. E aqui, você precisa imprimir a solicitação. Vou dizer que o log de pontos do console está aqui. Eu vou dizer pedido inicial. OK. Solicitação inicial. Por aqui. E você pode adicionar o objeto de solicitação aqui, algo assim. Está bem? Isso está feito. Agora, se você vier aqui, ok, deixe-me fazer uma atualização. Se eu disser adicionar postagem, opa, então eu conheço esse erro Tudo bem. Eu preciso devolver a solicitação também, ok? Solicitação de devolução. OK. Agora deve funcionar bem. Uma atualização de fogo. Se eu disser publicação de anúncio, você verá a solicitação sendo impressa. Agora, se você expandir isso, verá que, quando a solicitação foi enviada, há um cabeçalho de autorização. Este é o cabeçalho de autorização que adicionamos por meio da instância de eixo personalizada aqui que está sendo adicionado e enviado ao servidor. Você pode ter qualquer tipo de lógica aqui em que você busca, você sabe, algum tipo de token e tudo isso, você pode exibir isso, ok Então, isso é muito útil de certa forma, certo? E, sim, isso é o que é. É assim que você pode realmente ter uma configuração separada do seu código. Agora, eu gostaria de esclarecer quando você deve usar a instância de eixo personalizada e quando você deve usar interceptores, ok? Então, digamos que, se você estiver enviando um token, tudo bem, você também pode adicionar uma configuração de token aqui na instância do eixo personalizado e também pode adicionar um token aqui no interceptor Portanto, sempre que a solicitação estiver sendo enviada ao servidor, pouco antes de ser enviada, você pode adicionar um token aqui. Está bem? Então, quando usar qual método, certo? Agora, se seu token ou configuração for estático, qualquer tipo de configuração que seja estática, ok, e não exija uma alteração , você pode adicionar essa configuração à instância personalizada do eixo aqui. Está bem? Por exemplo, você pode ter um tipo de código ou um tipo de cabeçalho que talvez queira passar aqui, que diz tipo de conteúdo. Ok, então você pode dizer o tipo de conteúdo aqui. Então, esse cabeçalho de tipo de conteúdo, ok, isso significa aplicativo JSN OK. Então, esse tipo de cabeçalho que é estático, basicamente, pode ir para a instância de acesso personalizada Mas existem requisitos em que você pode ter cabeçalhos dinâmicos Agora, o que quero dizer com cabeçalhos dinâmicos é que, digamos que você queira adicionar um cabeçalho, ok, que contém o token obtido do armazenamento local Agora, o token de armazenamento local pode ser atualizado de tempos em tempos Pode ter uma expiração. Não é estático. Pode não ser estático, ok? Então, nesse caso, pouco antes de a solicitação ser enviada, talvez você queira executar um trecho de código para verificar o que é um token, obter esse token e enviá-lo junto com a solicitação, ok? Portanto, nesse cenário, você usará os cabeçalhos adicionados ao interceptor porque isso não é estático Isso é dinâmico, certo? E pouco antes de a solicitação ser enviada, você quer que a verificação do token seja feita, ok? Então é aqui que os interceptores podem entrar em uso, certo? Tratamento automático de erros. Portanto, os interceptores são excelentes para lidar globalmente com respostas a erros. Está bem? Portanto, se sua resposta EPI indicar que um token expirou, por exemplo, 401 Um interceptor pode ter o token de atualização automaticamente. Ok, eu deveria ter o código para atualizar o token automaticamente e repetir a solicitação Então, aqui estamos tendo o interceptor de solicitações. Você pode ter um interceptor de resposta, no qual você pode verificar se o erro foi Se foi 401, basta ter o código para atualizar o token e OK. Então, isso é algo que você não pode fazer com a instância de eixo personalizada aqui, certo? Porque isso é estático, certo? E, sim, essa é a diferença entre a instância personalizada do eixo e o conceito de interceptor Está bem? Pode parecer que muitos dos meus alunos acham que há uma sobreposição no conceito, mas ambos são distintos Isso é o que estou tentando destacar. Tudo bem? Então, espero que tenha sido esclarecedor e espero que você tenha conseguido acompanhar Tudo bem, eu vou ver todos vocês assim. 12. Supercarregando instâncias personalizadas do Axios com interceptores: Então, agora o que faríamos é desenvolver ainda mais essa instância de eixo personalizada. Está bem? E o que eu faria é, antes de tudo, mover isso para um arquivo separado. Está bem? Portanto, esse código pode se tornar um pouco complexo. Então, o que eu faria é cortar isso aqui. Eu acessava a estrutura do meu projeto e criava uma pasta aqui. Eu chamaria essa pasta como você pode chamar essa pasta de API. Você pode chamar isso de Utils, algo parecido. OK. E aqui, você pode ter api dot has. E aqui, você pode colar todo esse código. OK. E então isso é necessário aqui, eixo de importação. Então, isso é algo que vou mover aqui neste arquivo. OK. E precisamos exportar a API. Então, vou dizer exportar ou padrão, e vou dizer API aqui. Ok, algo parecido com isso. Tudo bem. Isso está feito. Ok, a API é exportada E agora que estamos aqui, o que precisamos fazer é inserir essa API. Então, eu posso inserir isso. OK. Você pode ver a API Utils, ok? Ok, então, por algum motivo, não estou gostando do nome da pasta Utils, então vou mudar isso para API também OK. E eu vou atualizar as entradas, certo? Então, sim, agora está parecendo bom. Então, o que eu fiz foi ter essa pasta EPI dentro da qual organizei meus pat E o que é pi dot Gs? Ele consiste em toda a configuração junto com os interceptores da instância personalizada do eixo aqui Está bem? E você pode usar isso onde quiser. Está bem? Então é assim que estamos usando isso. E se você vier aqui e eu atualizar, ok, se você disser no Post, verá que está funcionando perfeitamente bem Ok, então isso tornou nosso código um pouco mais modular. Certo. Agora, o que podemos fazer é melhorar isso aqui. Está bem? Então, estamos passando esse cabeçalho. OK. Vou me livrar dessa coisa simbólica aqui. OK. Digamos que temos o conceito de token dinâmico aqui, certo? Então, o que podemos fazer é aqui, eu tenho esse pedido. Está bem? Estou comendo isso. E aqui, eu posso adicionar mais uma função. Eu posso dizer Cfico, algo assim, e vou adicionar uma função de seta assim OK. E aqui, eu posso dizer const token OK. Eu posso obter o token, armazenamento local, ponto Obter item. Estou recebendo o token do meu armazenamento local, então vou dizer token aqui. OK. E então eu posso realmente dizer se o token for encontrado, se o token, então o que você faria? Então você diria config tot headers. Portanto, você pode chamá-lo de config ou request. Isso é absolutamente bom. Então, aqui estou chamando isso de solicitação, então estou chamando de configuração aqui Está bem? Então, eu estou dizendo config dot headers dot authorization Sessão, o é igual a. Eu posso adicionar um token de emparelhamento. Então, posso dizer, pairero, preciso adicioná-lo neste formato. Eu posso dizer token. Algo parecido com isso. Tudo bem. Então, o token será adicionado somente se o token for encontrado, certo? Se o token não for encontrado no armazenamento local, ele será mantido. OK. Então isso seria feito. E se você vier aqui, ok? Então, à toa, o token não será adicionado porque não há armazenamento local no momento, ok? Então não é arte, certo? Não é difícil nos cabeçalhos. Deixe-nos ver. Não é adicionar. Você pode ver porque eu não tenho nada armazenado no armazenamento local para este aplicativo no momento. Mas se você tiver, se estiver armazenando, você o receberá e poderá enviá-lo aqui. Está bem? Agora, aqui, isso está feito. O que eu posso fazer é até mesmo lidar, posso até mesmo adicionar algum tipo de tratamento de erros aqui. Então eu posso dizer erro. Algo assim, e eu posso dizer, opa, então eu posso dizer Console dot error OK. E aqui, eu posso dizer erro de solicitação, erro solicitação, e em nosso espaço, você pode dizer erro. Tudo bem. E você pode dizer devolver, prometer, não rejeitar. Estou lidando com a rejeição dos erros da solicitação. Oh, tudo bem. Eu vou dizer erros. Ok, algo parecido com isso. OK. O que estou fazendo é lidar com o erro de solicitação usando isso, ok. E essa é uma maneira, ok. Em seguida, você pode até adicionar o interceptor de resposta. Isso é tudo sobre o interceptor de solicitações, até aqui. O que posso fazer aqui é dizer resposta de pontos EPI. Oh, 1 segundo. Interceptores de pontos pi resposta de pontos, interceptores de pontos p resposta de pontos, ponto U.Isso é o que é Tudo bem. E agora, dentro disso, precisamos adicionar a função de seta. Então, o que faríamos é dizer resposta, algo assim. OK. E você pode adicionar algum tipo de manipulação aqui. Está bem? Agora, o tratamento que adicionaríamos é que podemos dizer que, se a resposta for bem-sucedida, retornaríamos apenas os dados. Então eu respondo e devolvo os dados, certo? Então, vamos dizer Ok, eu respondo, isso já está escrito. Então, se for resposta, retorne a resposta. Ok, então eu não estou adicionando lógica aqui. Basicamente, você pode ter sua própria lógica. Mas é assim que você lidaria com isso aqui. Esse é o propósito, ok? Assim, você pode ter sucesso, verifique aqui a resposta e depois devolva a Tita. Está bem? Então, você está retornando a resposta essencialmente. Está bem? Se houver algum erro, como você lidaria com isso? OK. Então, aqui, você pode simplesmente vir e dizer, ok, deixe-me adicionar uma aba aqui. OK. E agora você pode dizer aqui, erro. OK. Então isso é erro, e então você pode dizer assim. E aqui, você pode dizer se eu posso dizer erro ponto resposta. OK. Por isso, estou verificando expiração do token e quaisquer outros erros em todo o mundo. Está bem? Então, eu posso dizer erro, ponto, resposta, status do ponto aqui. Opa, o status está aqui. E se for igual a 401, ok, você pode adicionar qualquer tipo de, você sabe, qualquer tipo de manipulação aqui Você pode dizer erro de ponto do console, algo desse tipo, e dizer não autorizado Algo parecido com isso. OK. Você pode lidar com isso aqui e também adicionar a lógica de nova tentativa, dependendo do tipo de erro que você está recebendo OK. Se você está recebendo o erro 500, ok, como erro interno do servidor ou algo parecido, então você pode adicionar mais um aqui e dizer mais um cheque. Você pode dizer se o erro é 500. Ok, então você pode dizer erro do servidor. Então, basicamente, estou apenas fazendo um registro aqui, mas você pode lidar com isso da maneira que quiser, ok? Vou adicionar ponto e vírgula Ok, e vou adicionar colchetes redondos aqui. OK. Então, acho que está bem claro como isso pode ajudar aqui. OK. E uma vez feito isso, ok, tudo isso está feito, eu posso dizer return promise dot check aqui, e eu posso dizer erro. Tudo bem. Então, basicamente, você está rejeitando outros erros Tudo bem. Então, sim, é assim que você pode continuar desenvolvendo a instância personalizada do eixo. E essa pode ser a API personalizada que tem os pits personalizados, que tem a configuração global para as solicitações de API que você está fazendo, incluindo os baseUrls Então, se você está obtendo os URLs básicos do arquivo ENV, você também pode ter essa lógica aqui, ok E você pode gerenciá-lo separadamente do arquivo ENV. Está bem? Cabeçalhos amanhã, se algum novo cabeçalho estiver sendo adicionado, ok Então lembre-se, aqui, você não está codificando o URL, você não está codificando os cabeçalhos Você está apenas usando a API e toda a lógica relacionada ao componente que está aqui, ok? Somente a lógica relacionada ao componente está aqui, nada mais. Amanhã, se alguma coisa mudar na API, se algum cabeçalho for necessário, você terá que fazer a alteração em um só lugar, ok? Nesse caso, esse pi dot js será usado em todos os lugares. Então, amanhã, se você tiver 50 componentes, isso é o que será usado em 50 componentes. Assim, você não precisa fazer alterações nos 50 componentes, manuseie-os uma vez e tudo está resolvido. OK. Então, sim, é assim que isso funciona. E espero que seja você que esteja achando a utilidade disso aqui Tudo bem. Então, sim, isso é sobre esses instintos e interceptores de eixo personalizados, como você pode se fundir e trabalhar com eles E espero que você tenha achado isso útil. 13. Conclusão do curso: E isso nos leva ao fim dessa jornada transformadora no mundo da integração do EPI Bem, exploramos como a integração de APIs em seu aplicativo pode ser um divisor de águas na criação de aplicativos dinâmicos Investigamos os fundamentos de fazer chamadas de API, lidar com carregamentos e erros e aprimorar a segurança integrando instâncias de acesso e interceptores personalizados Também aprendemos e exploramos como você pode fazer várias chamadas de API simultaneamente, e agora você adquiriu as habilidades necessárias para aprimorar seus projetos de reação Mas lembre-se, a exploração não termina aqui. Eu encorajaria você a continuar experimentando, explorando e ultrapassando os limites do que é possível com EPIs em seu aplicativo de reação é possível com EPIs em seu Estou empolgado em ver como você usará essas habilidades e conhecimentos adquiridos para impulsionar seus projetos de desenvolvimento web Lembre-se de que inovação tem tudo a ver com adotar novas técnicas e tecnologias, e a integração de EPI ou o trabalho com EPIs é uma parte essencial do seu kit de ferramentas de Obrigado por ser um grupo de alunos tão engajado e entusiasmado Espero que este curso não apenas tenha equipado você com novas habilidades técnicas, mas também tenha inspirado você a pensar de forma criativa sobre a criação de aplicativos web robustos Com esta aula, você encontrará um projeto de classe que eu o encorajaria a concluir e compartilhar na seção de projetos com toda a turma. Eu gostaria de lhe desejar boa sorte e tudo de bom.