Como integrar uma API com Fetch API

Código fonte: github.com/fro...
Fala beginners, hoje vamos aprender como consumir uma API utilizando o fetch do javascript, a maneira mais simples e sem precisar de nenhuma instalação adicional, é extremamente necessário dominar essa forma de consumir uma API, pois existem maneiras mais avançadas como por exemplo Axios, React Query, mas a base sempre vem primeiro.
📰 Inscreva-se no nosso Canal no Telegram:
t.me/frontbegi...
👨🏻‍💻 Curso que indico:
💻 Curso CSS e HTML +30 Projetos | Front Beginners: hotm.art/8484-...
💻 FullStack Javascript: hotm.art/PruiOl9
💻 Curso Algoritmo: hotm.art/4KxE0k
✅ Já nos segue nas outras redes sociais?
Instagram: @frontbeginners
📚 Livros que indico:
Código Limpo: amzn.to/3vWLKy9
Arquitetura Limpa: amzn.to/376U7Oe
Domain-drive design: amzn.to/3vzvN0Y
Entendendo Algoritmos: amzn.to/3kxvihv
Padrões de Projeto: amzn.to/3y68Tjh
🖥 Meus equipamentos:
Teclado Keychron k2 v2: bit.ly/3BtZNy2
Mouse Mx Master 3: bit.ly/3RsvM7n
Mousepad: bit.ly/3QunWc3
Luz led Sokani P25: bit.ly/3B5HM7V
Bastão de Led RGB Sokani x25: bit.ly/3Btjmqh
Suporte Celular: amzn.to/3gyF0RQ

[@WesleyFilho-e1d]

Vontade de mandar esse vídeo para o professor da faculdade, pra ver se ele aprende a explicar. Parabéns mano!

[@FrontBeginners]

kkkkkkk tem gente que faz o fácil parecer difícil ne rs

[@Thiago-lk6pf]

Tava a umas 3 semanas tentando aprender sobre isso, pq as pessoas explicam como fazer, mas n explicam desde o super básico pq usar, como ela funciona e afins, obrigadooooo!!! Vc explica mto bem

[@FrontBeginners]

Que bom que ajudou meu mano, realmente tbm tinha essa mesma dificuldade no começo.

[@geligegamer]

3/100 ✅ Finalmente consegui compreender melhor como funciona o Fetch API, seu jeito de explicar pegando desde o básico, até mostrar como funciona o processo na prática é muito bom, continue assim.

[@FrontBeginners]

Vlw Rodrigo, tamo junto meu querido 🚀🚀

[@leandrofurtado2731]

Cara... você é sensacional, apenas.

[@FrontBeginners]

Hahaha vlw Leandro. tmj irmão 🙏🏻 que bom q ajudou.

[@eduardocallegario663]

tô acompanhando a série dos 100 dias e queria q fossem uns 3 vídeos dessa qualidade por dia kkkkkkkkkkk

[@FrontBeginners]

😂😂😂 rapaz até eu queria, mas se tu soubesse o trabalho que dá pra gravar uma aula, editar e postar, mas vamos firme 🚀

[@eduardocallegario663]

@@FrontBeginners akakkakaka osso, tô tendo um gostinho do q é agr, tô preparando uns vídeos de projeto pro meu LinkedIn e tá tenso 😅

[@eneilson8089]

vc tem tudo pra tar dando aula em uma grande empresa incrível sua facilidade de comunicação!

[@FrontBeginners]

Hehehe, quem sabe a oportunidade uma hora aparece, vlw Eneilson 🙏🏻🙏🏻

[@s2k_team.]

Brabooo de maiis

[@talitasalles]

Nossa, que fera! Entendi tudo... Parabens!

[@FrontBeginners]

Vlw Talita, tmj 🚀🚀🚀

[@lucasfreitas3514]

Parabéns pelo trabalho

[@FrontBeginners]

Vlw meu manoo

[@JacksonNunesJaco]

Top demais!😍

[@FrontBeginners]

Vlw meu querido 🚀🚀🚀

[@kaiqueoliveiraantonio8261]

mds vc explico muito bem, com muito detalhe, e ainda é bonito de quebra kkkkkk

[@vvendrick4638]

Parabéns! Super bem explicado. 👏

[@adrianmouzinho9615]

Conteúdo de qualidade 👌

[@FrontBeginners]

Vlw Adriannn 🚀🚀

[@LucasCosta-fk9yn]

Mano, muito bom cara, abriu minha mente sobre esse assunto. Muito obrigado pelos ensinamentos.

[@MarcosOliveira-pn8xm]

Brabo demais, muito bom!

[@FrontBeginners]

Vlw Marcos 🚀

[@diarioemvideo-fateccursods5816]

Estudandoooo agora... Partiuuu 100 dias!!!!

[@isaiascaetano5888]

Brabo d+. Tô entendendo esses conceitos para conseguir um estágio daqui a alguns meses. Faço Análise e desenvolvimento de sistemas e me identifico muito com Front End. Parabéns.

[@FrontBeginners]

Boa Isaías, sucesso meu querido ❤️🚀

[@rodrigobonfim9011]

Top, top. Simples e objetivo. Certeza vou estar aqui no 100/100

[@FrontBeginners]

Boa Rodrigo, vamos ver quem vai terminar esse tudo com a gnt rs

[@yanaraujo5141]

Que aula incrível cara! Obrigado por compartilhar seu conhecimento!

[@FrontBeginners]

Vlwww tamo junto ♥️

[@igor_walace]

AMÉM, VALEEU, ngm explicava o nome dos trem, esse cara ai é brabo!!!!😁😁

[@misaelsilva8158]

"Bodyzinho" kkkkkkkkkkkkkk rachei na hora. vlw pela aula prof, só conteúdo top.

[@FrontBeginners]

kkkkkkk os costumes raizes kkko

[@LusquinhaNathan]

cara, você é brabo! Porque todos os tutoriais que vi o pessoal nao explicava nada, só iam colocando um monte de codigo e fds, voce explicou direitinho. Obrigado!!

[@feliperibon8127]

a ideia de vc falar, onde vc usa no dia a dia ajuda a assimilar o conteudo

[@FrontBeginners]

sim com certeza hehe

[@brunodantas7882]

Muito bom!

[@FrontBeginners]

Bora pra cima 🚀

[@MatheusSilva-qm3ph]

Bora lá mais umas aula top!

[@FrontBeginners]

Bora Matheus pra cima 🚀🚀🚀

[@Edson_Freizer30]

poxaa finalmente aprendi esse negocio. Didatica muito daora

[@LuanVictor-tv4cm]

vi no curso que tava fazendo e achei muito difícil e esse cara explica muito bem, abriu a minha mente, espero que ele poste mais vídeos pois ajuda muito

[@FrontBeginners]

Boaaaa Luan, aqui a gnt tenta explicar do jeito mais simples possível rsrs 😌

[@fabiohenrique8430]

Você é incrível, ajudou bastante, obrigado.

[@renatosantos2065]

Boa didática meu nobre.

[@LaughLoopPSP]

canal otimo, realmente muito bom

[@vinicius5380]

3/100 ✔ Bora pro próximo!

[@FrontBeginners]

Mete marcha 🚀🚀

[@pretinhoilustra1625]

Muito bom esse tipo de conteúdo, estou finalizando um trabalho acadêmico e esse vídeo vai me ajudar muito.

[@FrontBeginners]

Opa que bom que vai ajudar 🚀🚀🚀

[@gustavodntts]

Um baita conteúdo! Quando puder, mostra um pouquinho pra gente sobre como utilizar o postman nessa questão de APIs? Seria muito legal um exemplo prático de como as coisas funcionam por lá! Um abraço!

[@wallacesilva6087]

bora !!

[@FrontBeginners]

Só vamos 🚀🚀

[@franca4712]

Muito boa a explicação parabéns

[@ThePedroGaming]

Que vídeo bom, mano! Sério! Ajudou demaisss

[@lucianosergiodesigner8850]

Continue assim.👏👏👏👏

[@FrontBeginners]

Vlw Luciano 🚀🚀

[@kelitasukita]

Seu conteúdo está me ajudando muito, obrigada demais! 😎✌

[@FrontBeginners]

Obrigado pela msg Kelita 😊 🚀🚀 tmj

[@FlowDeDados]

conteúdo de altíssima qualidade! acompanhando a jornada 🔥

[@vagnersantos6819]

Video muito bom! #dia3

[@FrontBeginners]

Boa Vagner, bora continuar a série.

[@Thiago-lk6pf]

Nunca fui de dar like nem de comentar em nenhum vídeo no yt, mas vc merece

[@FrontBeginners]

Vlw demais ❤️

[@cachorreiro]

Aula boa demais

[@reuelsiIva]

Explicação muito esclarecedora do funcionamento do fetch

[@leandrolemes3342]

parabéns, ótima aula

[@juniorkenmmasters]

Parabéns mano. mais explicado que isso impossível parabéns.

[@maciel.ferreira]

Estou acompanhando e vou continuar. Só senti falta de uma organização melhor em cada aula. Tipo, poderia ter gerado um projeto e dentro criar um arquivo para cada aula, ficaria mais legal. Mas bora pra cima.

[@FrontBeginners]

Fala Maciel, o intuito foi realmente trazer vídeos separados pra facilitar na busca e pesquisa no youtube e não gerar um curso com uma linha temporal :) Mas obrigado pelo comentário 💪🏼

[@pedrogermanoads]

Aula perfeita

[@FrontBeginners]

Vlw meu querido, tmj nessa 🚀🚀

[@pedrogermanoads]

@@FrontBeginners cara mto obrigado material mto bom parabéns

[@dcassis]

Muito bom o seu vídeo. Consegue fazer um vídeo partindo de um front end (exemplo: um formulário simples em html para lançar os dados no banco de dados? Vejo muitos vídeos sobre criar o banco de dados, consumir a api, mas não acho um vídeo simples do processo completo. Se for possível lhe agradeço muito!

[@tiagosecond]

Muito bom o vídeooo!! valeuuu !

[@sergiofigueiredo3702]

muito bom, parabéns

[@viniciusfaria4708]

Assisti vários vídeos sobre API mas estava com uma certa dificuldade em colocar em prática apesar de ter entendido a lógica. O seu vídeo esclareceu bastante e vou fazer um mini projeto usando API para praticar. Valeuuu

[@jailsonmedeiros8002]

TOP ✅. Mano dahora, me abriu bem a mente sobre essa tag, precisava integrar uma API de consulta em uma loja física. Só preciso autenticar a Key agora.

[@stitchpagodeiro]

esse video simplesmente tirou todas as duvidas que eu tinha sobre consumo de APIs, trabalho incrivel!

[@FrontBeginners]

valeu Bruno, tamo junto meu querido 🚀

[@lucasraymundo4167]

Boa aula, bem claro e direto

[@crysthinar.giampaoli1219]

Dia 03 ✓ ! Top ! Parabéns!

[@FrontBeginners]

Parabéns 🎉🎉🎉

[@rafaelsoeiro4033]

Mano, esse tipo de trabalho é super necessário muito obrigado por isso, eu tenho dificuldade de entender alguns conceitos porque não enxergo a utilidade prática daquilo e esse formato que vc ta fazendo ajuda muito! Eu to acompanhando a serie dos 100 dias meio atrasado pq dei uma procrastinada no inicio, mas agora é foco 🚀🔥

[@renata061288]

ótima aula

[@evandrodutra4975]

Muito boa a aula, e também gostei do exemplo de uso na sua sua empresa.

[@guilhermeh.v.santos7424]

Valeu!!! Otimo video!!!

[@felipeleopoldino5185]

day 3 ok 🚀🚀

[@FrontBeginners]

Muito bom Felipe, bora continuar no caminho.

[@moisessantos5398]

Mano vc é incrivel , ate conceitos que eu demorei pra compreende, se eu tivesse passado por esse video antes teria sido bem mais facil.

[@sarmuns2684]

Virando tradição vir a tarde depois do estágio e assistir um vídeo dos #100Dias

[@FrontBeginners]

show Sameminsmp vou ficar contente em te ver por aqui

[@jessiemoura9632]

Desculpa gritar, mas: SEUS VIDEOS SÃO MUITO BONS!!!! Obrigada pela jornada

[@FrontBeginners]

hahaha obrigado pela energia Jessie, segue a gnt lá no insta tbm 🚀🚀

[@zolkmusic]

Mesmo conhecendo todos os temas dos vídeos da jornada até agora, incrivelmente o vídeo sempre tem algo pra agregar. Muito bom!

[@FrontBeginners]

Boa é isso Zolk, a gnt sempre aprende algo né.

[@marafabiana852]

Cara, que explicação! Parabéns e obrigada!

[@darioreisjr]

Parabéns ... cara amando as aulas e tipo quando comecei a estudar programação tivesse as explicações assim acho que seria mais fácil, didático e mais gosto de estudar.... Tô vendo todas as aulas para poder relembrar uhullll

[@FrontBeginners]

Vlw Darioo 🚀🚀

[@JuniorMenezes94]

Ótima didática, muito obrigado. Que Deus te abençoe

[@cahdemarchi5258]

Já conhecia o conceito de api e fetch mas gostei de aprender nesse vídeo mais sobre o POST. Seguindo a jornada 3/100 ✔️

[@FrontBeginners]

sempre agrega algo né hehe, bom demais

[@eliakimsimoesdematos147]

você explica muito bem

[@FrontBeginners]

Valeu meu querido 🚀🚀

[@eletrotech51]

Muito bom

[@fernandobraaz]

Amigo primeiramente parabéns pelo video, tem algum video com validação ao banco de dados mysql?

[@DaviOliveira-mi5zm]

Top

[@FrontBeginners]

Vlw Davi, vmj

[@lucasv.bastos]

🚀

[@FrontBeginners]

🚀🚀

[@ivanrabelo1558]

Dia 3. Estou aqui!

[@FrontBeginners]

Boa Ivan, voaaaa

[@alexandreesposito4183]

✅

[@FrontBeginners]

🚀🚀🚀

[@carolsanches3516]

To terminando um curso de back e gostaria de aprender a integração com o front onde escontro a playlist dessas aulas para asistir desde inicio??

[@andreurbaneck]

muitobom

[@FrontBeginners]

🚀🚀🚀

[@Informatica-k1n]

top

[@werlenxaraujo456]

[@vitorsanto1479]

Boa noite meu nobre, queria sanar uma duvida. Existe um site de manga, quadrinhos japonês, chamado slimeread , eu fiz um requisição fetch diretamente para o url do site mas não veio nenhum dados só um html puro e esquisito. Queria conseguir os dados para mostrar no meu próprio site. O certo seria ver se o site tem uma api?

[@iamjvfs]

🚀🚀

[@lucasluz6209]

Como faço para ter o console no vscode ?

[@joaopedrofuzaro5950]

Uma dúvida, uma vez que a resposta chega, como iterar isso para mostrar no html por exemplo. Com js puro. Em frameworks como angular eu sei como fazer e tals, mas no js puro não sei.

[@FrontBeginners]

É da mesma forma, mas vc vai precisar a tag do html, por exemplo uma div e injetar dentro dela com innerHTML, aqui vai facilitar o entendimento: developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML

[@ruinedsyn]

Bom dia, Direto do trem 3/100

[@GisellyRock]

oi querido só nao entendi porque se esta em formato json, precisa converter p formato json...

[@weversonmp]

Vc deve estar falando do momento em que ele faz o POST certo? Então, na vdd, no momento do post, a informação que ele estava mandando é recebida pela API como um objeto javascript, o JSON.stringfy transforma os métodos e valores do objeto em json para poder enviar para a API. *Um exemplo da própria documentação : console.log(JSON.stringify({ x: 5, y: 6 })); // Aqui é um objeto javascript // Expected output: "{"x":5,"y":6}" - Saída em JSON

[@GisellyRock]

obrigada @@weversonmp

[@ricardocedraz2250]

3/100✅

[@FrontBeginners]

Bora Ricardoo 🚀🚀

[@favanzzo]

3/100 presente

[@FrontBeginners]

Bom demais meu querido 🫶🏻🎉

[@marcosdesouza8872]

3/100 is done

[@FrontBeginners]

Brabo 🚀🚀🚀

[@2010akatsuki]

agita

[@FrontBeginners]

Só mexe 🚀🚀😂

[@williamlantelmefilho5420]

3/100 checked

[@FrontBeginners]

🎉🎉🎉

[@apolloplays215]

Faltou colocar o dia

[@FrontBeginners]

Mais ligeiro que o gato hahaha, vlw meu querido.

[@eloysalva1324]

3/100

[@FrontBeginners]

Boa Eloy.. só vamos 🚀🚀🚀

[@anavitoriasousa5474]

3/100