As vezes o error não chega na parte do .catch porque quando se modifica a requisição .fetch() o dev tools já retorna antecipadamente a informação de que existe erro na porta, por isso o usuario não é notificado
Solucionado
As vezes o error não chega na parte do .catch porque quando se modifica a requisição .fetch() o dev tools já retorna antecipadamente a informação de que existe erro na porta, por isso o usuario não é notificado
Oi, Reinaldo! Tudo bem?
Entendo sua preocupação! Realmente, em alguns casos, o erro pode ser detectado antes mesmo de chegar no .catch do fetch, especialmente quando há problemas na requisição, como um erro de porta. Nesse caso, você pode tentar adicionar um tratamento de erro mais abrangente, verificando se a resposta do fetch foi bem-sucedida antes de tentar convertê-la em JSON. Algo como:
fetch("http://localhost:3000/videos")
.then(res => {
if (!res.ok) {
throw new Error(`Erro na requisição: ${res.status}`);
}
return res.json();
})
.then(videos => {
const containerVideos = document.querySelector(".videos__container");
videos.forEach(video => {
containerVideos.innerHTML += `
<li class="videos__item">
<iframe src="${video.url}" title="${video.titulo}" frameborder="0" allowfullscreen</iframe>
<div class="descricao-video">
<img class="img-canal" src="${video.imagem}" alt="Logo do Canal">
<h3 class="titulo-video">${video.titulo}</h3>
<p class="titulo-canal">${video.descricao}</p>
</div>
</li>
`;
});
})
.catch(error => {
const containerVideos = document.querySelector(".videos__container");
containerVideos.innerHTML = `<p>Houve um erro ao carregar os vídeos: ${error}</p>`;
});
Neste código, a função res.ok verifica se a resposta da requisição foi bem-sucedida. Se a resposta não for bem-sucedida, um erro é lançado, e o bloco .catch() é executado, notificando o usuário sobre o erro.
Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.
Abraços e bons estudos!