Como consumir de uma API usando a Fetch API! - Level Up #05

[@augustomartins6515]

Esta aula foi a melhor que já assisti sobre fetch! Mais um inscrito!

[@aryadnecoppini3313]

O cara explica nos minimos detalhes, como se eu fosse burra. E é exatamente isso que eu estava precisando, valeu demais!

[@Huriel]

Ba, essa foi boa! Mas você não é burra não, fico feliz de ter conseguido ajudar!! Tamo junto 😊

[@cleiton22ify]

Do jeito que eu gosto então, como se tivesse explicando pra um porta.

[@alexandrevictorvazdemello6493]

cara, vc fez um conceito complicado de entender parecer a coisa mais simples do mundo.... Parabéns!!!

[@Huriel]

Obrigado mano!!! Que bom que ajudei 🙏

[@carlosarturovivanco2190]

Parabéns pela aula. Muito didática e bem explicada. Continua assim 👏

[@Huriel]

Obrigado Carlos!! 🙌

[@josedeabreu7708]

Não sou de fazer comentários, todavia sou obrigado a te agradecer, pois você tem o DOM de ENSINAR, parabéns, DEUS lhe abençõe...mais um inscrito..

[@Huriel]

Muitíssimo obrigado mano!! Espero que tudo seja retornado em dobro pra você! Abraço

[@philipeoliveira132]

Uma das melhores explicações que já vi nessa Internet. Parabéns!

[@Huriel]

Obrigado Philipe!! Fico super feliz de ter ajudado

[@angelplay7829]

simples, direto ao ponto e sem enrolação. Muito didático, obrigado amigo!

[@Huriel]

Po aí sim heinn!! Fico felizão em ajudar mano, valeus :D

[@brunofelixf]

Didática excepcional, cara... valeuuu!

[@Huriel]

Tamo junto cara!! Valeusss

[@DaniloSancto]

valeu irmão, continua assim, tu ta ajudando muita gente!

[@Huriel]

Obrigado mano!! Vou continuar sim hehe

[@JuliCorso]

Obrigado, Huriel!

[@Huriel]

Valeuu mano!

[@Atlantis101]

Caraca , fez parecer simples uma coisa que é meio esquisita pra quem esta tendo primeiro contato com JS e APIs ! Ajudou demais , valeu !

[@Huriel]

Valeeeu Bruno!! Espero que essa simplificação tenha ajudado a entender, é bem tranquilinho mesmo, só temos aquele "medo" no início hahahahha

[@Freg12345]

Muito obrigado, mais um inscrito, sua didatica é muito boa e simples de compreender... Estava quebrando a cabeça para pegar apenas um item dentro do objeto e transcrever no html... a parte final do video.

[@Huriel]

Poxa, eu que agradeço Fabiano!! Que bom que seu problema foi solucionado, fico contente demais mann! ✌️

[@TheElcayro]

o exemplo é bem didático

[@rogercosta5707]

Parabéns meu brother. Código simples e ótima explicação!

[@Huriel]

Obrigado mann! Que bom que consegui ajudar :D

[@krisjohnathan]

sua didatica e muito boa, continue assim

[@Huriel]

Valeu mano!! 🤩

[@gustavo8433]

Conteúdo muito bom e didático. Parabéns

[@Huriel]

Fico feliz que tenha gostado mano! Tamo junto :D

[@007wisly]

cara continua fazendo este trabalho que um dia você vai ficar famoso igual Loiane e Guanabara, só questão de tempo, que aula incrível você esta de parabéns.

[@Huriel]

OXIIII olha a responsa heinnn hahahhah Po, valeuzão pelo feedback mano! Fico felizão de ler algo assim, vou continuar trilhando esse futuro aí hahahah Bons estudos cara, espero continuar principalmente contribuindo com o seu futuro! Abração

[@gtbsaraiva]

Excelente didática. Muito bom esse método de explicar o conceito de cada comando, função, método, pra quem está dando os primeiros passos no JS.

[@Huriel]

Obrigado Gustavo!! Busco sempre ensinar assim pra que o começo seja agradável e depois voe tranquilamente pra aprender o que quiser hehe Bons estudos mano! Abraço 🙌

[@jaycesaar]

Cara! Muito bom! Obrigado Ajudou muito!

[@Huriel]

Valeu Júlio!! Tamo junto mano :D

[@m.interestellar]

Parabéns pelo conteúdo, Huriel.. Esse material é INIGUALÁVEL.^^.

[@Huriel]

Agradeço muito esse feedback!!! Espero ter ajudado :)

[@amandaclsantana]

muito bom o vídeo! parabéns pela didática!

[@Huriel]

Obrigado!!

[@Rafael11piraju]

Sua didatica é muito boa, adoraria ver mais conteudo com html e css e js puro. Formulário de login usando api seria massa de ver

[@Huriel]

Obrigado Rafael! Ótima sugestão, pretendo trazer vídeos mais introdutórios pra Web e posso realizar algo do tipo hehe

[@glaudsonnunes9589]

Muito bom mano, explica muito bem parabens

[@Huriel]

Obrigado Glaudson!! :D

[@alendomouzinho4989]

Depois de ver muitos vídeos sobre como consumir api, teu vídeo foi o eu mais aprendi. Tua didática é excelente, explica cada coisinha 😍😍😍 Meu primeiro vídeo do canal e já me apaixonei

[@Huriel]

Poxa, obrigado mesmo pelo feedback!! Agora que conseguiu entender é facin facin hahahahah Valeu pelo apoio! 🥳

[@NickolasOliveira]

Obrigado Huriel, você é 10. Tem vários vídeos que "ensinam" fetch, mas não são exemplos reais, até porque como você disse, ninguém vai consultar uma API para só printar no console kkkkk Valeu pela explicação verdadeiramente prática

[@Huriel]

Aí simm Nickolas!! Fico feliz de que o exemplo de caso realista pôde facilitar no conhecimento :D

[@nickgabrielhi4718]

Parabéns vc transmiti conhecimento de uma forma muito clara e de fácil entendimento vc é fera!

[@Huriel]

Poxa fico muito contente por ter conseguido esclarecer esse tema pra vc cara!! Obrigado pelo apoio, tamo junto hehe

[@wagnerpedroo]

você é filho do Guanabara né? só pode, tu explica bem pra crlh sua didática é 100000

[@Huriel]

Filho do Guanabara??? Elogio sem tamanho esse hein!! Foi graças a ele que comecei hahahaha Poxa, obrigado mesmo pelo apoio e aos elogios, espero ter ajudado e continuar contribuindo com seus estudos!! Abraço 🖖🤓

[@lexoliver4473]

Cara, parabéns!!! Rodei por horas na internet e todo mundo parava no console.log. Com seu video, percebi onde tava errando. To começando no javascript e com certeza, aguardarei mais conteúdos. +1 inscrito!

[@Huriel]

Opaaa que notícia maravilhosa cara!! Muito bom mesmo, rodou por horas mas conseguiuuu hahahaha Continua firme nessa jornada, logo vou trazer mais conteúdos assim também :D

[@drslx]

Digo o mesmo eu ia até a parte que pessoal mostrava lá com. Console no navegador e tô começando agora a aprender consumir api, e não entendia bem com mostar esses dados depois

[@gabrielmoura3815]

Boa meu mano, ajudou muito!!

[@Huriel]

Valeuuu!!

[@drslx]

Muito bom esse conteúdo Huriel eu já curti e me inscrevi e chegando em casa vou aplicar numa api

[@Huriel]

Top demais Ricardo!! Melhor maneira de se aprender é seguir buscando mais, boa sorte na caminhada man! Espero continuar te ajudando nela :D

[@drslx]

@@Huriel passei até para uma amiga que estava atrás de aprender também

[@leonardocopello7223]

Parabéns. Você é simples, objetivo, didático tem uma excelente pronúncia do inglês. Deu um show de aula! Receba meus sinceros elogios!

[@Huriel]

Poxa, obrigado meeesmo pelo feedback Leonardo!! Fico feliz demais ao saber que estou conseguindo ajudar e ainda com qualidade! Abração :D

[@juanvictorDev]

brabo dms curti 🔥🔥🔥

[@Huriel]

Valeu mann!

[@mirandamaunze8588]

Video bem explicado, muito obrigado

[@Huriel]

Valeuu amigo!! Tamo junto

[@BirhalsBR]

esplêndido cara, consegui entender direitinho o conceito, tá de parabéns!

[@Huriel]

Que nice mano!! Ainda bem que consegui passar os conceitos direitinho! Abraço irmão

[@Archivesish]

Parabéns pelo vídeo, cara! Estou aprendendo JS e o seu vídeo foi de LONGE o MELHOR sobre Fetch API, vlw pelo conteúdo, sua didática é excelente.

[@Huriel]

Pooo obrigadão pelo apoio mano!! Fico feliz de ter conseguido te ajudar com o Fetch!! Abração 🤘

[@pedrohenriquefontinelles2422]

Cara, eu faço diversos cursos pagos e gratis e voce ate hoje foi o que melhor explicou algo em JS

[@Huriel]

E aíi! Poxa, brigadão cara!! Fico feliz por conseguir esclarecer isso man, tamo junto :D

[@joaovictorsilvadejesus1664]

Cara parabéns pelo conteúdo!!! Você é d+

[@Huriel]

Obrigado João!!! Abraço mano!

[@alvaro.guedes]

man, mt bem explicado, vlw msm

[@Huriel]

Valeu mano!!! Abração e sucesso ae

[@alvaro.guedes]

@@Huriel obrigado, tmj

[@mariocunha3555]

Me ajudou muito!! Obbrigado

[@Huriel]

Valeu!!

[@phcefas17]

Muito bom.

[@Huriel]

Obrigadoo!! o/

[@tomsantos220]

😊perfeito

[@Huriel]

Obrigado mano!!

[@IgorSousa185]

Cara que vídeo fantástico, parabéns, explicando tudo passo a passo, muito claro e direto, obrigado pelo vídeo

[@Huriel]

Poxa eu que agradeço man! Fico feliz de ter conseguido ajudar 😆

[@marcelosilvadias3902]

Que conteúdo massa, Huriel!!! Parabens pelo seus videos

[@Huriel]

Valeu Marcelo!!! Tamo juntíssimo mano :D

[@ronnaldoh]

Parabens Huriel, conteudo de primeira, vendo a serie sobre Hooks, voce manja muito de JavaScript e React, parabens pelo conteudo

[@Huriel]

Opaa Ronaldo!! Brigadão pela presença e pelos elogios cara! Vou seguir trazendo um conteúdo ainda melhor para vocês!! Valeuzão mano :D

[@farleyleite8046]

Que top mano, esclareceu tudo que eu tinha dúvida 😉

[@Huriel]

Muito bom mann!! Brigadão pela presença :D

[@pedrozeferinodasilva9746]

Top mesmo e simples

[@Huriel]

Obrigado Pedro! Abraço

[@darlannoetzold5276]

Muito bomm! nunca tinha visto isso..

[@Huriel]

É muito top!!! Valeuzão aí Darlan :D

[@isleybarbosa5920]

otimo video, me ajudou bastante!

[@Huriel]

Poooo valeu amigo!!

[@felipemartins6062]

top irmão

[@Huriel]

Valeusss mano!

[@guitt-web-code]

cara vc e foda!

[@Huriel]

Brigado mano!!

[@rafael-706]

Já pensou em fazer um curso ensinando? mt boa sua didática ! **depois que percebi não paro de escutar "né?" rs

[@Huriel]

Opa Rafael! Obrigado manoo!! Já pensei sim, mas to numa fase muito corrida... Quando as coisas acalmarem um pouco, pretendo trazer BASTANTE conteúdo top em formato de cursos!! Vou tentar para um pouquinho com os "né", esses vícios é complicado huahauhauah

[@joaovictorduarte5776]

Muito bom!

[@Huriel]

Obrigado amigo!

[@gabrielflauco318]

Otimo video e otima explicação, so não entendi uma coisa, como o json da resposta foi inserido no paramentro data?

[@Huriel]

Opa Gabriel!! Foi inserido dessa forma pois a busca retorna nesse formato já, então ele é armazenado na variável data, para que possamos consumir ela dentro do nosso código!

[@devmais]

Fantástico

[@Huriel]

Valeu!!!

[@fredericoenzo3349]

ajudou pra karalho

[@Huriel]

Boaa mano!

[@holandesvoador5121]

Cara muito bom o vídeo, a melhor explicação que achei ate agora! Só pra tirar uma duvida. Qual seria a diferença de resultado se ao invés de "li..innerHTMl = item.tittle" usasse "li.innerText = item.tittle" ?

[@Huriel]

Opa! O innerText diz que quer injetar um texto, uma string mesmo, e a linguagem trabalha melhor para esse tipo de dado mais simples. Já o innerHTML diz que é pra trabalhar com HTML, o que não faz diferença prática na visualização e não gera erros de código, apenas não é a semântica mais adequada e tem diferenças de performance 😊

[@holandesvoador5121]

@@Huriel entendi, então o innerText daria o msm resultado?

[@murilogarcia6281]

Muito bom video, estou a pouco tempo no desenvolvimento web, e tenho uma duvida, digamos que eu tenho um backend, ou precise consumir um backend, que para realizar as requisições eu precise informar um token, ou credenciais de acesso. Como eu faria nesse caso, para conseguir passar esses dados sensiveis no javascript, sem que fique exposto no navegador?

[@Huriel]

Olá Murilo! A melhor forma de trafegar esse token seria com cookies HttpOnly

[@islangomes5977]

Vídeo muito bom !! Me ajudou muito a aprender a consumir API. Porém, quando fiz aqui dá problema no "li.innerHTML = li.title;" ele cria a lista mas ela vem vazia, não retorna dado nenhum e só as bolinhas de tópico...

[@Huriel]

Opa, obrigado pela presença man!! Consegue colocar uma parte do código fonte? Posso tentar ajudar a identificar o problema

[@islangomes5977]

@@Huriel Opa irmão, obrigado pela resposta! Eu consegui resolver, o problema era : data.map((item)) foi definido, e lá no innerHTML eu pedi pra retornar algo que ele não reconhecia, como li.item, mudei para item.title para retornar os titles da api e funcionou ! :)

[@Huriel]

@@islangomes5977 nice!! Resolução perfeita, sem mais! Continua na caminhada que tem potencial man :D

[@lucasweirich_]

Vc usa alguma extensão pra ver a resposta do json no navegador? Porq de padrão ele vem em forma de texto corrido ne

[@Huriel]

Opa Lucas! Sim, uso a JSON Viewer

[@lucasweirich_]

@@Huriel show, obrigado pela ajuda, e parabéns pelo trabalho, ótimo conteudo

[@Huriel]

@@lucasweirich_ Obrigado mann, tamo junto!!

[@vidal67ms]

Utilizando um mock local do projeto, eu consigo utilizar da mesma forma?

[@Huriel]

Consegue sim!! E consegue utilizar também com qualquer outro link de API que você tiver ao seu dispôr

[@ygormoraes6290]

Cara muito obrigado!!! Conteúdo excelente!!!!! só uma duvida, pq o "const li = document.createElement('li')" nao fica fora do data.map? ele atualiza a const li a cada repetição?

[@Huriel]

Opa! Obrigado man Sim, ele faz a criação de uma constante dentro de cada map, pois aí a variável é criada e removida da memória a cada map, deixando o código mais limpo após a renderização, sem a existência de uma variável desnecessária

[@LuanSantos-rz1bt]

O que acontece quando meu script ou até mesmo os dados da minha API começam com { }? No seu, os dados começam com [ ] Os meus começam com chaves pois tem categorias e subcategorias. Tentei fazer isso e deu erro dizendo que "Uncaught (in promise) TypeError: data.map is not a function" Será que preciso converter algo ou fazer algo diferente? Como? Ah, obrigado pelo didática e sucesso!!

[@Huriel]

Obrigado Luan pelo feedback!! Man, quanto ao {} (que no caso, seria o formato de objetos), se o seu objetivo é interagir com todos os dados da API, a melhor solução seria converte-lo para um array. Para isso, dê uma olhada no Object.keys do JS, acredito que ele vai resolver seu problema :D Boas festas e um próspero ano novo!!!

[@rafael98php]

eu nao uso o then nao, sempre uso o await com async. Tudo a mesma coisa, né?

[@Huriel]

Opa! Não tem problema mano, pode usar sim! Só prefiro utilizar o then em Promises no useEffect pq o async await ali é um pouco mais complicado, mas não tem problema também hahahahah

[@genuinobrasileiro]

Cara, legal o video, mas eu tentei em outros sites e não retornou nada. Fiz o teste de console.log antes de implementar o codigo todo, mas não retornou nada. A pergunta é: Isso funciona pra quê? Tentei entrar no site do g1 e outros jornais com o intuito de buscar somente o texto das notícias.

[@Huriel]

Opa Marcelo!! Acredito que não seja possível executar no site do G1, alguns sites tem sua API bloqueada pra acesso do cliente... Mas isso funciona em um cenário onde você tenha autorização da API e do Frontend, pra fazer algo parecido com o G1 mesmo, por exemplo :D

[@renan3088]

cara como faço pra pegar somente um dado da api ? tipo tenho um banner na minha página, nesse banner só quero que aparece um conteúdo, mas com esse código aí, acaba pegando todos os dados da api e colocando na página

[@Huriel]

Opa Renan! Tudo depende da sua API mano, pode ser que ela disponibilize uma URL que dê acesso exclusivo ao recurso que você precisa, assim você onde carregar ele de forma separada dos demais!

[@renan3088]

@@Huriel eu consegui mano pegar quantidade que quero, mas como eu pego a imagem da api e defino como background de uma div ?

[@Huriel]

Olha, não é um processo tão simples que eu consiga explicar por aqui... Entra na nossa comunidade do Discord que eu e o pessoal podemos tentar te ajudar man :D

[@pricilaoliveirarocha]

CARA A SUA DIDÁTICA É PERFEITA! PARABÉNS MANO

[@Huriel]

Ah muito obrigado!! Agradeço demais o feedback e a presença por aqui! Seja bem-vinda :D

[@flaviosilva6591]

Gostei! bem explicado, valeu

[@Huriel]

Valeu!!!