APRENDA FETCH API DE JAVASCRIPT COM PROJETO
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- 🔴 Conheça noss curso completo de JavaScript: app.horadecoda...
Neste vídeo você vai aprender tudo sobre o recurso de #Fetch #API de #JavaScript
Com ele é possível fazer requisições assíncronas à APIs de forma nativa, sem bibliotecas com jQuery ou Axios. Tornando o seu projeto muito mais performático, pois está utilizando um recurso da linguagem.
📂 Código do projeto: github.com/mat...
📒 Ebook JavaScript gratuito: www.horadecoda...
🔴 Instagram: @horadecodar
🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord
🔴 Conheça noss curso completo de JavaScript: app.horadecodar.com.br/course/curso-de-javascript-completo
Foi Deus namoral kkkkk eu estava estudando e cheguei na parte de promisses, async e await, e até ai de boa tinha um conteúdo do seu canal sobre os assuntos, ai procurei sobre fetch api e não achei.. ai hoje abro o youtube e aqui estamos kkkk obg Deus, recebaaa
hahahaha boa Arthur!
O cara é meu professor de SQL, PHP e agora de Javascript.
Parabéns professor, tudo de bom e obrigado pelo excelente conteúdo!!!!
Pessoal, quem recebeu "Cannot get /post.html":
Se seu index e post.html do projeto estiver em uma pasta assim, sendo "projeto" a raiz e não uma subpasta do seu code:
C:\Programaçao\testes\projeto
Seus html estão na raiz do projeto.
Para resolver basta tirar a barra "/" em "`/post.html?id=${post.id}`" a barra da linha:
link.setAttribute("href", `/post.html?id=${post.id}`)
é muito satisfatório encontrar um professor com uma excelente didática. Parabéns, ótimo conteúdo
Graças ao seu vídeo criei coragem e fiz um projetinho para acessar a API da câmara dos deputados, eu consegui! muito obrigado guerreiro!
boa Eduardo!
Que aula perfeita! Procurei diversos vídeos sobre fetch, promises, async e await. Os seus vídeos além de ensinar, mostram exemplos práticos de como isso funciona! Nota 10
Aeee, assistindo essa vídeo aula e pesquisando por fora, entendi como funciona e consegui implementar um API no meu projeto de conversor de moedas. Valeu, agora entendi o conceito e como aplicar o fetch e utilizar os dados. Entendendo a base vou poder me aprofunda mais e utilizar de forma mais complexa
Oi professor. Acabei neste momento a playlist de JS. Apesar de trabalhar com muitos assuntos tratados nos seus vídeos, é muito bom assistí-los para entender melhor conceitos e teorias que a gente meio que só sabe na prática.
Além disso, é comum ver nas suas aulas algumas estratégias e técnicas interessantes.
Sinto não ter clicado no curtir em todos os vídeos da série, a gente acaba esquecendo, mas saiba que estou muito agradecido pelos vídeos e gostei de cada um deles.
Assistir a playlist na sequência acaba fazendo com que a gente pule os começos e finais. Entendi perfeitamente que você precisa se apresentar, pedir likes, informar sobre o livro, fazer propaganda dos cursos em cada vídeo, etc. pois deve ser comum pessoas acessarem vídeos específicos.
Não tem muito jeito, essa não é uma necessidade que o utube impõe.
Esta não é a primeira e nem será a última série do seu canal que vou acompanhar.
Abraços e ótima semana.
Obrigado professor, terminei seu curso e agora estou me aprofundando um pouquinho mais em js, achei que nunca iria aprender js ou qualquel outra linguagem, mas, com sua didatica, estou me superando cada vez mais, Obrigado professor, Deus te abençoe.
Excelente, prof. Matheus!
Obrigado, cara!
Deus abençoe você!
valeu Vinicius, tamo junto!
⭐Conheça a Formação Front-end (+50 de horas de conteúdo, +20 de projetos) para você se tornar um dev front-end: www.udemy.com/course/formacao-front-end-html-css-javascript-react-e/?couponCode=LANCOUFE
Sensacional... !!! Parabéns professor, seus cursos são muito esclarecedores.
Excelente didática! Fiz seu curso de React aqui no TH-cam e sigo assistindo suas aulas. Excelente didática!
Obrigado Professor Matheus pelo material com excelente conteúdo, com exemplo de projeto interessante e pela didática clara e objetiva.
Parabéns e continuado sucesso!
Valeu Matheus !!! Muito obrigado, mais uma excelente dica e suas explicações são diretas de facil entendimento.
obrigado por acompanhar também Mario, te espero no próximo =)
Muito obrigado professor! Já havia alguns dias que eu estava querendo entender essa API.
de nada Heleno!
Aula excelente! Aprendi muito, gostei muito do projeto, me diverti demais!
valeu Raul!
Muito BOM TEMA... Estava mesmo a procura...
valeu Sousa, bora pro vídeo entao =D
Esse video caiu na hora exata! Obrigado Matheus!
show Reginaldo, de nada =D
@@MatheusBattisti acabei de assistir, mto bom! no final de semana fiquei batendo cabeça com a parte da requisição POST pq não sabia q precisava do header.
Aula fantástica, muito obrigado!
Parabéns Matheus, quem quer aprender a programar tem uma ótima referência nesse canal.
muito obrigado Ronoel =D
Obrigado Professor. Ótima aula.
Como sempre um ótimo conteúdo, professor. Obrigado!
Muito obrigado, adoro os seus cursos
mais um vídeo top, to sempre acompanhando!
obrigado por acompanhar Bruno!
Excelente projeto! Simples e bem explicativo para quem precisa compreender o conteúdo!
valeu Pedro!
Excelente. Bem dinâmico e didático. Curtindo as aulas
valeu Abraão! =)
Somos gratos por seus ensinamentos e tem me ajudado muito. Obrigado !!!
valeu Marcos, obrigado por acompanhar =)
Rapais show de bola, estou no curso de vue também, muito obrigado pelo seu conteúdo.
de nada Rivaldo =D
Ótima aula! Obrigada por compartilhar!
Boa mateus. Excelente ideia de vídeo.
valeu Fernando, semana que vem trarei um projeto bem legal utilizando o mesmo recurso =D
Já tenho alguns cursos seus na udemy conteúdo de qualidade
valeu Kleber =D
Boa, Matheus!!! Tô aprendendo o React no teu curso aqui no TH-cam, na aula 23, 24 a gente usa o Fetch... Daí passei aqui pra ver direito como funciona... Logo vou conseguir um emprego e vou postar aqui no seu canal, mano!!!
Valeu, parceiro, pela força, pela iniciativa!!!
Fica com Deus!!!
boa Danilo, estou no aguardo da sua vaga =DD
abraço
Vc conseguiu o emprego?
Olá, Mateus obrigado pelo conteúdo ! , a muito tempo venho querendo da um curso de html5 projeto meu mas queria um video ensinando a criar uma sistema de autenticação de login para que o usuario so possa entrar com email e senha, com ainda nao chegeui nesse nivel seria uma boa.
Obrigado professor tem me ajudado muito suas aulas gratidao !!!!
De nada 😀
você é muito bom !!
tamo junto Weslley!
Deixando aqui a resposta pra uma coisa que me consumiu bastante tempo, caso mais gente venha a passar pelo mesmo.
Não ter o fechamento da tag estava bugando o que deveria ser visto depois que clicasse no botão "ler". Depois de adicionado o fechamento, o bug some.
projeto excelente
Didática excelente. 🤜🤛
valeu Henrique!
Descobri hoje que esse recurso, também funciona no Django.
Professor, tem alguma aula ensinando como formatar textos inseridos via JS? porq formar um texto todo eu entendo q é possível via css normalmente, mas por exemplo, inserir uma spam em uma frase especifica e formatar... ai tem q usar vários métodos né? buscar frase, inserir essa frase dentro do spam, atribuir a classe e taus...
Maravilhoso o conteúdo! Parabéns!
valeu Mateus, tamo junto!
Mano, muito obrigado pela Aula, era tudo que eu precisava
de nada Gabriel!
top vo fazer e colocar no meu git parabens
boa Andre!
Muito obrigado pelo conteúdo, me ajudou muito!
de nada Farley!
Show de bola!!!! Muito bom
valeu Zeriel!
Maneiro demais professor, estou tendo uns bugs mas deve ser pq não estou usando um localhost, mesmo assim obrigado
eu tambem
Excelente Aula !!! Muito Obrigado !!!
Muito obrigado pelo conteúdo!
Obrigado pelo o conteúdo!! Sensacional
Valeu Battisti! muito obrigado
Muito bom
Muito bom! Obrigado
Conteúdo top!
Professor, tenho uma duvida: Posso usar o fetch sem o async await/promise? Eu fiquei com duvida o pq vc usa o fetch dentro de uma promise, sendo q o fetch ja retorna uma promise
Muito Bom!
Rapais o projeto vai simples, do nada surge um promise.all delicinha, isso sim que é uma cartada.
haha melhorar a performance dos requests =D
Sensacional!
valeu Rafael!
@@MatheusBattisti já fiz o projeto, pratiquei e coloquei no meu github para futuras consultas kkkkkk . Muito top
Matheus Battisti Qual é a data provisória do calendário para você lançar um novo curso na Udemy? Uma data aproximada.
Show 👍
valeu Reginaldo!
O uso do método Promise.all dentro da função assíncrona getPost(id) era só porque queríamos fazer 2 requisições ao mesmo tempo? Se quiséssemos fazer uma única poderia ser feito sem a Promise?
Uma simples duvida, sobre o fetch, ele trabalha com os promisses, no caso do .then e o .cath por que nao utilizou eles ? ou nem sempre é necessario utiliza-los ?
Muuuuuito booooommmmmmmmmmmmm!!!!!!
muito bom!
Muito bom! Obrigado!
então to com muitas duvidas, vamos lá, eu queria pegar todos esses dados da api e colocar como variável para ser acessados. como faço?
Vídeo TOP...
valeu!
27:43 professor não entendi o pq da desestruturação, poderia por favor me explicar? o que está sendo desestruturado?
Professor, bom dia.
Como faço para adicionar um texto 'carregando...' durante uma requisição da API?
👏
O bravo!
ótimo tutorial.
Pow leva a mal não professor eu sei que pode ser que seja chato mas nenhum projeto seu que eu tento fazer funciona ou da certo eu escrevo tudo como vc escreve mas ... Não vai .... Agora dessa vez o live server tá mostrando "refuse to apply style from " e depois "uncaught (in promise) typeerror cannot trás properties of null ,não é possível
TA DANDO A MESMA COISA NO MEEEEEEEEEEEEEEEEEEEEEEEEU AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH AJUDA A GENTE AÍ MATHEEEUS
Descobri papai, tira o script src do head, coloca no body
Agora o meu ta dando esse mesmo erro só que no div.appenChild(div)
@@VitorSilva-cj9my eae, vi q tu colocou esse comentário agr pouco, to fazendo agr, qualquer duvida tu pode me ajudar?
@@luckingbr2047 vllw papai, fiz no meu outro pc e deu certo '-'
no meu, logo no começo, onde vc passa um console log, aparece fetch not defined
gostaria de saber como se enviam esses dados para o front-end...
tentei fazer, mas deu erro no classlist
Estou com problemas! Não consigo acessar a página dos posts por conta de um erro 404 onde consta que a página não foi encontrada. Eu segui o passo a passo do vídeo e até coloquei o código do vídeo na minha maquina mas o erro permanece, se alguém puder me ajudar...
Fala Guilherme, aqui também cara! Consegui resolver?
Eu consegui. Tenta assim: na linha
link.setAttribute("href", `post.html?id=${post.id}`)
tira a "/" antes do post
Matheus, te adotei como mentor na faculdade, obrigado kkkkk
Vídeo incrível, só esqueceu de colocar o ":hover" no input submit lá no CSS
Não esqueceu não kkkk
@@luckingbr2047 esqueceu sim, ele só aplicou no "a"
@@alveselivelton mas o "a" era o input submit dele lkkkkk tanto q se vc for na pagina principal, todos os botões que tem lá são os input submit
@@luckingbr2047 errado, ele colocou a:hover, input[type:submit] e faltou o :hover, eu coloquei no meu
Faltou colocar o pseudo seletor
scripts.js:44
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'appendChild')
at scripts.js:44:20
at Array.map ()
at getAllPosts (scripts.js:29:8)
como resolveu? tô com o mesmo erro :(
Não consigo encontrar o problema no codigo que fiz...
Qdo clico no botão "LER", e ele vai para a página /post?id=1, ele da erro de
Cannot GET /post.html
Opa ... Falha minha .... Meu projeto estava numa subpasta /xpto/index.html .... adicionando esse caminho no js, deu tudo certo!
Os comentarios ficam gravados ou sao destruidos apos atualizar a pagina?
Se você fizer do jeito que ele explica na aula, os comentários que você adicionar vão sumir, pois ao abrir a página você vai ter a página em branco e ira fazer um get de todos os comentários via API.
Os dados só ficariam salvos se você fizer o request através de um arquivo json local
21:00
Como faço pra acessar os dados de uma api GET passando usuario e senha?
Acessando
@@luckingbr2047 fora zoeira, era autenticação
@@lucasmoreira437 aa tendi, vc usa algum framework backend?
@@luckingbr2047 não, no momento estou migrando do PHP, Freamwork só pra front, o React
👋👋👋
meu hide não funcionou nem por reza braba
achei, coloquei errado o endereço da página de css
Poderia ir mais direto ao ponto.
Caso alguem tenha esse erro ou algum semelhante "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'appendChild')
at scripts.js:44:20
at Array.map ()
at getAllPosts (scripts.js:29:8) "
Tente renomear a div (post-container) se possivel ate troque para uma class, para min funcionou assim :)