E aí beleza seja muito bem-vindo ou bem-vinda a mais um vídeo aqui quem fala é o Welker e esse é o canal papo digital e no vídeo de hoje eu vou te mostrar na prática a forma correta de fazer requisições e consumir dados de apis externas dentro do nxt 3 então roda vinheta e bora pro vídeo Olha eu sei que você deve est meio confuso aí se perguntando pô mas então quer dizer que eu não consigo usar o axus dentro do nxt 3 ou então Poxa eu usei axus a minha vida toda agora eu vou
ter que aprender tudo de novo uma ferramenta completamente nova mas calma tá Vamos por partes aqui que eu vou te explicar certinho bom olha só aqui no repositório do nuxt 3 tem uma discussão onde o pessoal tava pedindo para eles portabilizar o módulo do nxt axus que tem Pro nxt 2 né E eles queriam que portabilizar pro nuxt 3 E aí o pessoal que desenvolve o nuxt respondeu o seguinte e olha dá para você usar o nxt 3 não é muito difícil é só você instalar e configurar aí da forma que você já tá acostumado
ã mas considere que o que o axius ele foi construído com api antiga que usa o XML http request e uma versão do node também bem antiga e e isso faz com que ele não funcione muito bem em alguns cenários como o Web workers por exemplo ah e o pessoal do nxt também teve alguns problemas em fazer o access funcionar utilizando a funcionalidade de server Side rendering porque o que acontece eh quando a quando a requisição era disparada do lado do servidor quando eles conseguiam montar o o client ali e não dava para saber se
aquela requisição ela já tinha sido completada ou se ou mesmo se ela tinha sido disparada do lado do Servidor ou do lado do client então acabava sendo feita de novo e aí gerava duplicidade de requisições toda vez e aí o que que eles pensaram não vamos construir uma solução própria né que funcione bem na parte do server Side rendering que é o forte do nuxt E aí eles construíram uma ferramenta que é bem parecida ali com o fet Api que a a gente já tá acostumado a usar aí e que é esse carinha aqui ó
esse ofet E aí na própria descrição aqui eles falam que é uma fat api melhorada que funciona no node no Browser e nos workers que seri um web workers e E aí se você reparar bem o projeto aqui ele já tem 46 contribuidores e já tem bastante gente utilizando então eles estão sempre dando manutenção isso daqui sempre trazendo melhorias Mas quais são os pontos fortes desse negócio aqui vou te mostrar aqui as funcionalidades que eu mais gostei além de funcionar a mesma interface que a gente utiliza no Browser a gente consegue utilizar no node Mas
o que eu mais gostei foi a questão aqui do parsing ele faz o parce automático então a gente não precisa toda vez que fazer uma request pegar o json lá e dar um parce ele já faz isso pra gente é E aí a gente consegue customizar ainda aqui nesse parse response você pode dizer qual é o tipo de parce que você quer usar o padrão é o Jason parse Mas você pode criar uma função para customizar e e você pode trocar o tipo de responsa imagina que você tá fazendo uma requisição pro end Point que
vai trazer um arquivo um blob aí você pode mudar aqui o response Type dele que ele já vai pegar certinho uma outra coisa também que eu gostei Ah A questão aqui do auto retry você consegue colocar Quantas vezes você quer que aquela requisição seja refeita caso de alguma falha de comunicação e você consegue colocar um delay então aqui nesse caso aqui tá colocando 500 msos Ele vai esperar 500 msos entre uma tentativa e outra também dá para definir um timeout para não ficar esperando a vida toda o servidor responder ah ele também oferece a possibilidade
de você tipar os tipos de retorno então para quem gosta de utilizar typescript aí dá para usar certinho ele também tem interceptors então assim como a gente tem lá no axus você consegue interceptar aqui toda vez que ele for fazer uma request e configurar alguma coisa que você precise e no on request você consegue tratar alguma algum erro de request que não deu certo e uma outra coisa também que é muito interessante é que ele permite criar uma Instância assim como axus então você cria uma Instância com as configurações base ali com os interceptors e
tudo mais e ele é bem interessante eu vou mostrar na prática aqui mas só para você entender mesmo o porqu que a gente não utiliza axus no no NX 3 basicamente é por causa disso E aí esse carinha aqui da forma que foi implementado internamente dentro do nuxt eh eles conseguem identificar a requisição através de uma chave única eu já vou mostrar isso como funciona mas basicamente é o seguinte quando uma requisição é disparada do lado do servidor a gente define uma chave única para essa requisição E aí quando ela é disparada e resolvida do
lado do servidor quando chega no client ela não é refeita o server consegue pegar aquele retorno e só repassar pro Fronte entendeu então eles conseguem ter bem esse controle aí e aí como que eles fazem isso aqui no noxt se a gente vier aqui nessa parte aqui ó de de f a gente consegue ver que eles TM três formas são dois composables novos que eles criaram e o próprio fet E aí como que funciona Olha só o e Fat e o eira são composables que a gente utiliza lá no front end tá na parte do
client se a gente tiver fazendo requisições do lado do servidor esses caras aqui não vão existir Então a gente tem que utilizar o cifrão fet mesmo bom paraa gente ver na prática como isso funciona Vamos criar um projetinho aqui e aí eu vou mostrando o passo a passo como isso funciona tá tá aí eu vou criar um projeto novo aqui E para isso então a gente vai utilizar o nux que é o c do n Eu Vou Chamar esse projeto de nux 3 Apis Agora eu vou entrar aqui na pasta do projeto e instalar as
dependências [Aplausos] Beleza agora que já instalou as dependências eu vou abrir o projeto aqui no vs code E aí a primeira coisa que eu vou fazer é vir aqui nesse app. viw e vou tirar esse cara daqui esse Welcome a gente não vai utilizar eu vou na verdade alterar ele aqui pra gente utilizar o page E aí a gente vai habilitar então o sistema de roteamento do nextt Além disso como a gente vai trabalhar com requisições para tentar deixar mais claro aqui quando as requisições são feitas eu vou colocar o componente de loading aqui do
NT esse NT loading indicator beleza a e agora vamos criar aqui uma pasta chamada pages aqui eu vou ter a index pview aí aqui eu vou ter um template E aí nesse caso aqui a gente vai ter três páginas diferentes pra gente ver as três formas que Ox nos oferece de fazer requisições tá então aqui eu vou ter o link a primeira vai para [Aplausos] fet aí eu vou copiar esse cara aqui o segundo vai para I assim que [Aplausos] deira e o [Aplausos] terceiro vai para ofet certo e aí agora vamos criar essas páginas
então aliás antes de criar as páginas só para ficar mais organizadinho vou colocar esse carinho aqui numa [Aplausos] lista [Aplausos] beleza agora sim vamos criar as páginas [Aplausos] he certo E aí vamos começar implementando aqui então o exemplo do use fet E aí vamos lá aqui no nosso template vamos ter um título aqui logo abaixo aqui eu vou ter um [Aplausos] botão [Aplausos] no evento de clique eu vou chamar um método aqui chamado refresh logo abaixo aqui eu vou ter uma div e ela vai ser exibida quando tiver [Aplausos] [Aplausos] carregando uma outra div aqui
para exibir erro certo e aí por último eu vou ter uma outra div aqui aliás nesse caso não vai ser uma div vou ter uma tag PR porque aqui eu quero exibir o objeto que vai vir e aqui só exemplo a gente vaiar a api E aí por enquanto eu vou passar fixo aqui o nome de um Pokémon e eu vou passar o nome do Charmander Beleza então agora vamos implementar aqui o o o nosso código por assim dizer né [Aplausos] tá fazer o contrário ó então aqui eu vou ter um a e vou usar
o composable euse f certo ess F ele nos pede para utilizar apenas a URL da requisição então eu vou copiar aqui a URL do endp que a gente precisa chamar que é esse cara aqui e aí se eu quiser customizar alguma coisa eu passo um objeto aqui de configurações então eu posso dizer aqui qual que é o método tá eu posso dizer aqui no caso que o método que eu quero utilizar é o get E se eu quiser passar alguma coisa aqui no headers aí eu posso dizer aqui que o content Type por exemplo é
application Jon ou eu posso passar alguma outra coisa certo e esse composable use fet ele nos retorna algumas propriedades aqui a primeira delas é o daa que seria o retorno do endp em si e aí aqui eu vou renomear ele para Charmander o segundo parâmetro é o Aliás a segunda propriedade é o pending para indicar se essa requisição tá carregando ou não E aí por fim ele tem error para indicar se deu de algum erro e o refresh é um método que a gente pode utilizar para refazer essa requisição com os mesmos parâmetros Vou salvar
do jeito que tá aqui e vamos rodar o projeto aqui pra gente ver como que vai [Aplausos] ficar tá ele deu um erro aqui porque nas outras páginas não tem nada então a gente tem que pôr pelo menos um template aqui então vamos lá só para não quebrar a aplicação coloco o template coloco o título e aqui a mesma coisa vamos se agora vai funcionar certo então carregou a aplicação aqui aparentemente não tem mais nenhum erro eu vou deixar aqui na guia de Network pra gente ir vendo as requisições Beleza então olha só vou abrir
a página aqui do Us fet você percebeu que ela demorou um pouquinho para abrir isso aqui acontece pelo seguinte E lembra que eu falei que o nux consegue ver quais são as requisições que foram feitas do lado do servidor e repassar o retorno pro client bom o o US fet do jeito que eu usei aqui ele vai funcionar da seguinte forma ah quando eu quando eu faço a requisição dessa página que eu chamo lá no servidor a request dessa página lá no servidor ele dispara a requisição ele espera o retorno e assim depois que ele
resolver essa requisição e tiver o retorno dela aí sim ele vai permitir que eu navegue pra página e vai repassar o retorno pro client Então nesse caso aqui ele bloqueia navegação enquanto as requisições do US fet não forem resolvidas certo repare aqui o seguinte Olha o tamanho desse objeto que retornou aqui tem muitas informações e a página demorou um pouco para ser carregada a gente consegue otimizar isso daqui tá esse composable use fat ele tem uma propriedade aqui chamada transforme certo e essa propriedade transforme Ela nos permite manipular a informação e pegar apenas as propriedades
que a gente precisa para retornar pro Cent Então essa essa propriedade data aqui ela não vai ter aquele objeto gigantesco ela vai ter apenas as propriedades que a gente precisa pegar e aí como que a gente faz isso aqui olha o Transform ele é ele recebe uma função e essa função ela recebe retorno como parâmetro pra gente poder customizar aqui nesse caso eu vou retornar apenas um objeto aqui eu quero retornar simplesmente o ID então aqui seria deid o nome então deira e image aí o Image é deira Sprit ponto front Def tem uma outra
forma de fazer tá imagina que a gente não precisasse dessa image aqui se a gente não precisasse disso tem uma outra propriedade aqui que seria o pique aí a gente não passaria o image tá porque o pique ele não vai descendo ali A Hierarquia do objeto ele só pega no primeiro nível então pegaria aqui o id e o name E retornaria essas propriedades para esse objeto deira como a gente precisa acessar aqui o Sprit para depois pegar a propriedade do front Def não daria certo de usar o pique por isso que a gente tá utilizando
o Transform certo eu vou salvar aqui então aí agora vamos voltar aqui na página inicial e repare que quando eu for carregar a página vai ficar muito mais rápido ó certo porque nesse caso a gente não precisou transportar todas as propriedades Ou seja aquele objeto gigantesco e lá da parte do servidor pro Fronte né pro client Então como as propriedades foram poucas o objeto era menor então foi mais rápido de carregar tela uma outra coisa que a gente pode fazer imagina que a gente não quer esperar a requisição terminar para poder carregar essa página a
gente tem duas opções de fazer isso tá aqui a gente pode usar um outro composable que é uma variação desse daqui que é o o e la fat assim tax é a mesma a gente só adiciona esse laser aqui para indicar que a gente não quer bloquear a navegação e aí quando a gente faz isso deixa eu voltar aqui e vamos tirar esse transforme Por enquanto só pra gente conseguir fazer a página demorar mais tá olha só quando a gente vem carregar aqui repare que ele fica carregando mas a página já tá aqui então ele
não bloqueia quando a gente usa o la beleza vamos deixar isso aqui um pouco mais interessante agora tá imagina que a gente queira ter a opção aqui de buscar os dados de Pokémon de forma dinâmica Então se a gente tiver mais de um Pokémon para fazer a requisição como que a gente faria para passar essa informação e ali pra requisição Olha só eu vou criar aqui então vou criar uma div aqui e vou colocar um um select aqui com algumas opções de [Aplausos] Pokémon aqui a gente vai ter um v [Aplausos] Model e aqui vamos
ter algumas opções então primeiro aqui vai ser o [Aplausos] Charmander que é o que vai vir selecionado por padrão isso daqu para ficar mais fácil o segundo aqui eu vou colocar o bubassauro [Aplausos] certo e agora por último eu vou colocar aqui o [Aplausos] Pikachu Ah tá pera aí esse carinha aqui tem que ficar abaixo do Pré senão a gente quebra aqui a nossa cadeia de elsif certo e aí a gente precisa fazer algumas alterações aqui então na nossa parte do script aqui o select Pokémon ele vai ser um ref começando com o Charmander que
vai ser Então a nossa opção padrão e aqui cara olha só que interessante a gente vai ter uma variável aqui end Point essa variável vai ser uma variável computada e é aqui que a mágica acontece olha só eu tô pegando aqui o mesmo endp e aí no lugar do nome aqui eu tô passando o Pokémon selecionado certo que que acontece eu vou vir aqui no us la fet aliás vamos voltar ele aqui PR fet e aqui no lugar dessa URL eu vou simplesmente colocar endp certo repare que eu não tô colocando endp P Val tá
simplesmente end quando a gente passa dessa forma o entende que esse cara ele é um computer de ref E aí toda vez que o valor desse computer de ref é refeito esse cara aqui é disparado novamente de forma automática Tá então vamos lá pra tela para dar uma olhada beleza olha só a gente carregou a tela aqui tá com o Charmander quando eu trocar ele vai refazer a requisição sozinho viu só então aqui ele já pegou os dados do bubassauro certo então essa aqui é a forma básica de utilizar o US fet ã tem algumas
outras propriedades que você pode passar lá naquele objeto de opções mas aí eu sugiro que você depois dê uma olhada com calma lá na documentação oficial mas o básico seria isso daqui a Agora imagina que a gente precisa fazer uma requisição composta aqui imagina que a gente precisa pegar dados de dois end points no carregamento dessa tela como que a gente faria bom com o use fet a gente não consegue fazer isso e ficaria muito feio a gente ficar colocando uma porrada de use fet um abaixo do outro aqui né mas para isso a gente
tem o composable use C que deira tá só para você entender esse componente iuse fat ele usa o iuse deira aqui dentro dele embutido só que ele fornece uma sintaxe mais simples da gente utilizar que é nesses casos aqui quando a gente precisa fazer simplesmente uma uma requisição mais básica né tá vamos fazer o seguinte eu vou copiar todo esse conteúdo aqui e agora vamos vir aqui para essa página do C que deira vou substituir Deixa eu só corrigir o título aqui beleza agora vamos fazer o seguinte vou trocar aqui toda essa parte tá e
aqui eu vou colocar o us a deira que é o outro composable que a gente vai ver como é que funciona esse cara bom esse aqui diferente do US fat eu não posso simplesmente passar a requisi aliás eu não posso simplesmente passar a URL que eu quero requisitar nesse caso eu sou obrigado a passar uma chave única tá E aí quando eu digo chave única é chave única para toda a aplicação então a gente precisa e especificar bem o contexto porque é através dessa chave única aqui que o nuxt vai saber e distinguir essa requisição
das outras então quando ela for disparada do lado do servidor ele vai conseguir através dessa chave única identificar ela de novo lá no client para não refazer Ele simplesmente pega os dados que foram recebidos lá no no server e passa pro client sem ter que refazer ela de novo aqui eu vou chamar de Pokémon info E aí como segundo argumento que a gente passa vai uma função e aqui eu vou usar dois end points aqui eu vou pegar os dados básicos ali do Pokémon que a gente já tava utilizando e eu quero pegar alguns dados
da espécie dele também como o habitat em que ele vive e qual que é o tipo de de textura do corpo dele por assim dizer tá primeira coisa a gente tem que vir aqui nessa função e dizer que ela é [Aplausos] assíncrona e aqui olha só eu vou ter o pok deira e vou ter o deira e aqui eu vou chamar o Promise P All aqui dentro Olha só eu vou chamar dois end [Música] points certo aqui eu tô chamando dois end points o mesmo que a gente já tava usando antes e o do Pokémon
espécies e aqui como identificador eu tô passando o Pokémon selecionado tá o nome do Pokémon que a gente vai selecionar lá repare que aqui eu tô utilizando esse cifrão fet que é aquela terceira opção que foi informada lá na documentação do nxt aí aqui esse cifrão fet Você pode passar as mesmas opções do Fat API que são basicamente as mesmas coisas que a gente estava passando aqui no us fet ó a gente pode passar o método a gente pode passar o headers Então são essas opções que a gente passa aqui no no fet ou você
pode vir aqui na documentação doet que todas essas opções aqui também são cabíveis lá Bom enfim então aqui a gente tá chamando esses dois end points e tá jogando nessas variáveis aqui repare que aqui a gente não tá utilizando o Transform certo porque aqui dentro do usa a gente consegue fazer uma customização mais mais personalizada das coisas então aqui a gente consegue chamar dois Ends se você tiver alguma biblioteca de terceiros para poder fazer as requisições por exemplo imagina que você queira utilizar o firebase Então você teria que utilizar o Us deira e aqui dentro
você chamaria api do firebase para trazer os dados de lá beleza dito isso vamos continuar aqui então aqui eu vou ter o retorno de um objeto e aí esse cara vai ter um ID que vai ser o Pokémon deira pid um name o image até aqui é a mesma coisa que a gente já tinha feito agora eu vou pegar aqui o habitat que vai vir de espécie deira habitat pname e eu vou ter um shape que também vai vind do espcies data Shape pname certo então aqui dentro do usn data a gente tá fazendo as
duas requisições e retornando o objeto da forma que a gente precisa só que esse cara ele também nos oferece um objeto de configuração então aqui eu posso passar um outro objeto eh e aí como a gente quer ficar refazendo a requisição sempre que o selected Pokémon for alterar a gente não pode usar dessa forma aqui ó porque não é só um endp vou apagar esse cara e o que a gente vai utilizar na verdade é uma propriedade aqui chamada watch certo e aí esse watch é um Ari e você pode colocar as variáveis que você
quer que ele fique escutando sempre que ela alterar valor essa requisição vai ser refeita com o novo valor dessa variável salvar aqui e vamos dar uma olhada lá na tela como ficou ó então aqui ele Já trouxe os dados que a gente precisava Vamos alterar aqui o Pokémon ele já carregou os dados do segundo Pokémon certo e aqui repare que ele tá bloqueando a navegação pra gente não bloquear a navegação mas fazer de uma outra forma ao invés de simplesmente vir aqui e colocar o e use las a deira aqui no objeto de configuração eu
vou passar uma outra propriedade que seria a la como true Se eu fizer isso ele já vai parar de bloquear a navegação tá então quando eu faço isso ele já fica aguardando a requisição ser completada aqui do lado do do client Beleza então o US deira ele é uma forma mais avançada Da gente fazer as requisições mas ainda existe uma forma mais customizada do que essa tá imagina que a gente tem uma outra Api para poder consumir dados e essa outra api ela necessita que a gente passe no header toda vez que a gente for
fazer uma requisição um Token para verificar se esse usuário tem acesso ou não se ele tá logado ou não e imagina que a gente precisa passar também um user ID para identificar quem é o usuário que tá fazendo essa requisição e ainda imagina que a gente tem que fazer uma tratativa de erro sempre que a gente fizer uma aquisição e retornar um 401 ou 403 que são códigos http relacionados à permissão de acesso imagina que a gente tem que deslogar esse cara ou dar um aviso para ele daria para fazer com o user c deira
e toda vez que a gente usar aqui esse cifrão fet a gente customizar os headers e colocar os interceptors dá dá para fazer mas não é o recomendado fica chato de ficar fazendo isso toda vez e ah a gente fere aqui as boas práticas de programação que é ficar se repetindo certo então para isso para resolver esse tipo de problema agora a gente vai criar uma digamos assim um plugin né porque o n 3 ele nos permite criar plugins E aí a gente vai criar um plugin para fazer esse tipo de requisição Tá bom mas
antes pra gente ter tudo que a gente precisa a gente vai ter que vir aqui nessa documentação do wet e instalar esse cara ó Ó vou parar aqui a aplicação e aqui eu vou colocar um menos D porque eu quero que esse cara seja instalado apenas como dependência de desenvolvimento por esse cara ele já existe lá dentro do eu vou instalar ele de novo entre aspas só porque eu preciso da tipagem tá Beleza já tá instalado então agora vamos voltar aqui e criar uma pasta chamada plugins e aqui o nome desse plugin vai ser http
beleza olha pra gente criar um plugin no nuxt no caso do nuxt 3 a gente não necessariamente precisa ir lá no nxt config e registrar ele tá a gente só precisa fazer isso caso ele esteja em uma subpasta se ele tiver na raiz da pasta plugins não é necessário tudo que a gente precisa fazer é exportar uma função chamada define inux [Aplausos] plugin [Aplausos] beleza aqui a gente vai ter uma variável chamada feter que vai ser a Instância então do fet aqui primeiro eu vou passar o base URL esse base URL aqui no nosso caso
vai ser o Barra api por isso a gente vai criar alguns end points internos aqui dentro do próprio porque o ele é um Framework por assim dizer consegue criar end points dentro dele então eu vou criar alguns end points aqui como se a gente tivesse uma API para simular mesmo que a gente tivesse ali um backend que espera um token ou algo nesse sentido só para exemplificar melhor tá esse nome aqui tá errado base URL é maiúsculo tá então a gente tá definindo aqui o base URL aqui eu vou ter o on request que é
uma função e esse on request aqui ele tem a própria request e tem options certo aqui eu vou ter um al [Aplausos] header beleza Olha só imagina que quando você for fazer as requests Você vai precisar ir no local Storage ou então lá na Store do Pinha para poder pegar qual que é o token de usuário e também para pegar user ID ou alguma outra informação aqui é o momento de você fazer isso tá no aqui nesse interceptor você conseguiria acessar a Store ou local Storage e pegar esses dados para setar no header da requisição
e aqui a gente vai fazer o seguinte ó aqui eu vou utilizar o Object ass pra gente mesclar o que veio da requisição com o header de autorização ou de autenticação que a gente tá colocando aqui e aqui eu vou colocar o al header primeiro e depois o options p [Aplausos] headers porque dessa forma a gente não vai sobrescrever Então olha só a gente passa primeiro aqui o off header E aí depois o options p headers vai vir em seguida porque se a gente passar essa mesma propriedade aqui lá quando a gente chama o plugin
nas telas eh Então essa propriedade vai ser sobrescrita no caso options P headers aqui vai ter prioridade E aí quando a gente tá criando plugins no NT a gente tem a opção de injetar esse plugin na Instância do nxt Ah nesse caso aqui ó no return a gente retorna um objeto com a propriedade provide esse provide ele é um objeto também e aí a gente coloca uma propriedade aqui ó nesse caso vai ser http Por enquanto vai ser um objeto vazio só pra gente exemplificar e isso na prática seria o seguinte esse http lá nas
telas nos nossos componentes viu a gente consegue utilizar ele usando o http dessa forma que já já eu vou mostrar PR você como funciona tá então aqui a gente criou a base do nosso plugin mas para finalizar a gente vai criar uma pastinha aqui de de Services e aqui dentro eu vou separar meio que por digamos módulos né vou ter uma outra pasta aqui chamada user aqui eu vou ter um index P TS e eu vou ter também types.ts para ficar bem separadinho certo então vamos começar aqui pelas tipagens aqui eu vou ter um I
user profile que seriam os dados do usuário vou ter aqui um ID name que vai ser uma string vou ter um eil certo isso aqui já vai ser suficiente um ID um name um eil também vou ter um user [Aplausos] product esse cara aqui vai ter um ID vai ter um name e vai ter um Price Beleza então agora vamos criar aqui a nossa classe de [Aplausos] serviço vamos ter aqui então a classe user service a a primeira coisa que a gente vai ter aqui vai ser uma variável privada chamada f e aqui ela vai
ser do tipo fet ó repare que esse fat ele vem lá da biblioteca ou fet então por isso que a gente instalou ela como dependência de desenvolvimento aqui tá aí aqui no construtor é que a mágica acontece olha só a gente vai receber uma estância do fet e vai repassar esse cara para essa variável privada aqui eu vou mudar a tipagem e vou deixar n porque os tipos são um pouquinho diferentes embora seja a mesma biblioteca com as mesmas funcionalidades repare que esse F Create aqui ele tem uma tipagem diferente á ele retorna um un
e um nitrat request e a gente não tem acesso a isso então aqui eu vou deixar n mas a gente tá deixando a tipagem Fixa aqui na declaração da variável ainda assim a gente vai ter um bom aut complete tá então primeiro aqui eu vou ter um get user profile então aqui a f eu vou tipar ela mas primeiro vou passar aqui o endp o endp vai ser barra user Prof file e aqui a gente tem todas as opções ali do Cifrão fet tá então aqui eu consigo que é o méthod por exemplo e tudo
aquilo que tem lá na documentação do fet beleza a tipagem aqui então vai ser um I user profile e aqui eu vou retornar a resposta do endp e agora eu vou ter um get user pro [Aplausos] ó então mesma coisa a gente tá usando o fet interno aqui que é privado passa qualquer o endp e passa as configurações de requisição e aqui a tipagem dele certo agora que a gente tem a nossa classe de serviço já pronta aliás faltou retornar esse cara aqui certo Agora sim agora que a nossa classe de serviço tá pronta vamos
voltar lá no plugin e aqui no plugin a gente vai fazer algumas alterações primeira coisa a gente vai importar a classe de serviço [Aplausos] Ah Pera aí que tem uma coisa errada aqui ó essa pasta Services ela não deve ficar dentro de plugin tá ela tem que ficar na raiz do projeto Beleza então importamos aqui a nossa classe e aqui a gente vai criar uma interface chamada I http E aí a propriedade user do tipo user service aqui final do nosso plugin a gente vai criar uma outra variável chamada http Services que vai ser do
tipo ih http aí a propriedade user vai ser igual a new user service tá E aí como a gente tá instanciando a classe no Construtor lembra que a gente colocou aqui no Construtor para receber a Instância do fet então agora a gente vai pegar esse fetcher aqui que é a Instância que a gente criou com as configurações básicas e repassar para esse cara certo então dessa forma Quando a gente tiver lá inicializando a aplicação o nxt vai inicializar esse plugin vai criar a Instância do fet com essas configurações iniciais aqui que a gente precisa eh
de base url de interceptors e tudo mais e aí para toda classe de serviço que a gente criar a gente Repassa essa mesma Instância lá para dentro dessa forma a gente garante que só vai criar uma Instância para ser utilizada nas classes de serviço ao invés de ficar criando Instância uma para cada classe de serviço né dentro da classe mesmo a gente cria uma única vez e Repassa certo e aí agora para finalizar aqui a gente tira esse objeto e coloca http Services tá E aí sempre que a gente for criando classes novas de serviço
a gente vem aqui nessa interface e aumenta uma propriedade aqui e aumenta uma Instância aqui beleza então o nosso plugin tá pronto tá criado fechar um pouco de coisas aqui aí agora só pra gente vê esse negócio funcionando Vamos criar aqui os end points então né aqui dentro de server eu vou criar uma outra pastinha chamada api E aí dentro de api a gente vai ter dois arquivos que seriam os dois end points eu vou ter aqui um user profile e também vou ter um user products certo vamos começar aqui então pelo user profile aqui
eu não vou aprofundar muito nessa parte de servidor e apis aqui dentro do NT mas deixa aqui nos comentários se você quer saber mais sobre essa parte aqui de server do nuxt é de criação de apis e tudo mais que aí eu faço um outro vídeo mais focado nessa parte Tá bom mas basicamente aqui no nxt funciona assim toda vez que a gente vai criar um endp ou alguma coisa do lado do servidor a gente tem que exportar uma [Aplausos] função essa função se chama define event handler tá ela se chama define event handler e
aqui essa função ela tem uma função de callback dentro dela que recebe O Event e dentro desse event tem tudo que a gente precisa aqui tá aqui a gente tem a request a gente tem os headers tem tudo e aqui a gente quer verificar se na no header da requisição tem essa informação aqui ó do autoriz Inclusive eu vou copiar ela daqui olha só off header tá então aqui ó eu posso usar a função get header passando O Event E aí eu falo qual que é a propriedade que eu quero tirar de dentro do header
tá E aqui eu vou fazer uma validação se não tem o al header ou se esse se o valor desse al header for diferente desse x aqui que é o que a gente passando lá nas configurações do plug então eu vou retornar um send error repassando aqui dentro O [Música] Event e também Create error certo por o s error ele vai dizer pro servidor do que a gente tá dando um TR aqui em alguma exceção e o Create error a gente consegue customizar então aqui eu tenho um status code [Aplausos] que eu vou passar 401
e eu posso passar um status message tá beleza mas se esse cara tiver o header então eu vou retornar aqui um objeto que seria os dados ali do perfil de usuário dessa forma aqui resolve aí eu vou copiar tudo isso aqui para reaproveitar nesse outro end Point aqui que a estrutura vai ser bem parecida o que vai mudar é simplesmente o retorno porque aqui a gente vai retornar os produtos desse cara então aqui eu quero retornar um arrei primeiramente aqui eu tenho o ID name e eu vou ter um Price e aqui eu vou retornar
o segundo produto bom dessa forma aqui já é suficiente Beleza então a gente criou os Ends aqui e criamos O plugin como que utiliza esse plugin lá na tela bom vamos voltar aqui então na página doet certo aí aqui olha só a gente vai ter uma estrutura bem parecida tá a vai ter uma div a gente vai ter uma div aqui com umif para dizer que tá carregando uma outra div para indicar que teve um erro e por fim aqui a gente vai ter um [Aplausos] pré com vls e aqui a gente vai imprimir Então
os dados do usuário [Aplausos] tá logo abaixo a gente vai ter um botão e aí no Clique desse botão a gente vai chamar uma função chamada fat user products e aqui a gente vai ter mais ou menos a mesma estrutura [Aplausos] tá e aqui a gente vai verificar se existem produtos para esse [Aplausos] cara então se tiver produtos a gente vai exibir esses produtos [Aplausos] aqui oh beleza nosso template vai ficar dessa forma e aqui no [Aplausos] Script aqui a gente vai ter uma pequena diferença que eu vou utilizar aqui typescript tá Então vamos lá
pra gente uar aqu nosso plugin a gente vai fazer o seguinte ó O nxt 3 ele tem um composable aqui chamado e next app esse composable ele retorna à Instância do nxt então aqui o US app a gente pode vir aqui e de dentro dele a gente tira o http então aqui de dentro desse composable use App ele retorna a Estância do nxt E aí aqui dentro a gente consegue extrair o cifrão http que é o nosso plugin repare que aqui a tipagem dele não tá muito bem ele tá falando que o tipo aqui não
é conhecido isso acontece porque o n ele gera tipagem das coisas em tempo de compilação aqui ele não tá funcionando ainda mas que a gente rodar o build aqui ele vai gerar a tipagem E aí a gente vai conseguir ver isso de uma forma melhor beleza e aqui na inicialização eu já quero ter os dados do usuário os dados do produto não são tão interessantes assim na hora que carrega a página mas eu preciso ter os dados aqui pelo menos do perfil de usuário para exibir na tela daí para fazer isso olha só aonde que
a gente vai cair de novo vamos voltar aqui pro US Sink Dea aqui eu vou dizer que a chave única dessa requisição se chama user profile e aqui então eu vou usar o nosso http ponto user pon get user [Aplausos] profile certo e aqui vou pegar o Cira renomear isso para user profile vou pegar o pending e vou pegar o error vou tirar essa parte aqui por enquanto deixa eu deixar comentado aqui enquanto e vamos rodar aqui a aplicação tá agora olha só que interessante a gente rodou a aplicação aqui e no momento de fazer
o build repara que o foi lá e já injetou os plugins que a gente adicionou e aí nesse momento que ele injetou os plugins ele gerou a tipagem pra gente Então olha só quando a gente passa o mouse aqui o cifrão http Ele já sabe que é do tipo a http aqui dentro quando a gente chama o user Ele já sabe que é do tipo user service e aqui ele já fala qual que é o tipo de retorno da função que a gente tá chamando também então Vamos descomentar essa parte aqui agora e aqui a
gente vai ter então sling products que vai ser um ref de false e aqui a gente vai ter user products que vai ser um ref e aqui o tipo dele é i user product Array certo vamos adicionar importação aqui e aqui então a gente vai implementar a nossa função aqui fet user products certo aqui vai ser um pouco diferente pelo seguinte só para você entender de forma bem clara a diferença eu utilizo o Us fet Ou use a syn data Apenas quando eu quero carregar alguma informação na inicialização da página tá se eu for fazer
aqui uma aquisição do tipo post delete alguma coisa nesse sentido eu não vou usar esses composables ou mesmo se eu queira fazer uma requisição do tipo get mas que eu não preciso dela logo que a tela é inicializada eu também não preciso aliás eu não devo utilizar o US deira tá nesse caso aqui como a gente vai carregar os produtos Depois que a tela já tiver carregada a gente vai clicar num botão e carregar manualmente a gente vai criar a função da forma convencional que a gente sempre criou então aqui eu vou colocar [Aplausos] umat
[Aplausos] C Beleza então aqui ó eu vou fazer o seguinte eu vou dizer que user products p value é igual a aí eu vou chamar então a função get user products lá do nosso plugin http tá e agora vamos então acessar a nossa página aqui do ofet Ó então aqui a gente já carregou os dados do usuário e agora eu vou carregar os dados do produto certo então só recapitulando aqui de uma forma rápida o composable use fet é pra gente fazer requisições mais simples né então Digamos que que a gente só quer pegar alguma
informação e não tem que fazer muita configuração e nem muita tratativa de erros ou coisas do tipo a gente pode utilizar então o use fat passando simplesmente o end Point ali e utilizando a função transforme pra gente pegar somente as propriedades que a gente realmente precisa tá e o use e a cin deira é um pouco mais customizável a gente consegue aqui dentro do US Cira passar uma função e dentro dessa função aqui a gente consegue fazer requisição para mais de um endp ao mesmo tempo a gente consegue utilizar bibliotecas de terceiros para fazer a
requisição E aí aqui a gente não precisa utilizar o Transform a gente pode retornar o objeto eh da forma que a gente precisa sem utilizar o Transformer aqui dentro da função assíncrona que a gente passa como callback mesmo Ah e aí a gente tem a opção aqui do watch né caso a gente queira passar alguma variável eh que seja dinâmica imagina que a gente tá fazendo uma requisição para um endpoint que seja paginado então é bom a gente passar essa variável da página aqui no watch então toda vez que o usuário clicar lá para trocar
a página a gente refaz a requisição com o novo valor da página porém se a gente quiser fazer uma coisa mais elaborada né a gente consegue utilizar o cifrão fet de uma vez Então o ideal é que a gente crie um plugin que vai criar a Instância desse C Frão fet aqui pra gente com as configurações básicas E aí a gente vai parando ali por classes de serviço e repassando essa instância porque aí a gente consegue extrair de dentro da Estância do nuxt aqui aquele plugin que a gente criou E aí O plugin por sua
vez já acessa as classes de serviço beleza bom era isso que eu tinha para passar para vocês hoje Espero que você tenha gostado desse conteúdo Espero que tenha te ajudado a esclarecer melhor como que a gente trabalha com requisições dox 3 deixa aqui nos comentários também o que que você achou Qual foi a Sua percepção sobre essa nova forma de trabalhar com requisições e APS aqui no n 3 e se você quiser mais vídeos de n 3 deixa aqui nos comentários também tá bom não esquece de dar o like compartilha com seus amigos e até
a próxima
