Como a Mônica deixou espaços para fazermos algumas mudanças, eu aproveitei para treinar e melhorar um pouco a questão dos erros, tanto no tratamento quanto na prevenção.
conecta-api.js
As mudanças que fiz são relacionadas ao tratamento de erros. Aqui teve uma pegadinha pra mim porque não sabia que o Error() construia um objeto. Por conta disso, eu tentei armazenar nele o status e a mensagem, em forma de objeto mesmo.
throw new Error({
status,
mensagem,
})Só que, ao fazer iss, dá um erro. O certo é fazer como está no código.
async function listaVideos () {
const conexao = await fetch("http://localhost:3000/videos");
const conexaoConvertida = await conexao.json();
if(!conexao.ok) {
let erro = new Error;
erro.status = conexao.status;
erro.mensagem = conexao.statusText;
throw erro;
};
return conexaoConvertida;
};
async function criaVideo (titulo, descricao, url, imagem) {
const conexao = await fetch('http://localhost:3000/videos', {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify({
titulo: titulo,
descricao: `${descricao} mil visualizações`,
url: url,
imagem: imagem
})
});
if(!conexao.ok) {
let erro = new Error;
erro.status = conexao.status;
erro.mensagem = conexao.statusText;
throw erro;
};
const conexaoConvertida = conexao.json();
return conexaoConvertida;
}
async function buscaVideos (termoDeBusca) {
const conexao = await fetch(`http://localhost:3000/videos?q=${termoDeBusca}`);
const conexaoConvertida = conexao.json();
return conexaoConvertida;
}
export const conectaApi = {
listaVideos,
criaVideo,
buscaVideos
};mostrar-videos.js
Como meu conhecimento sobre lidar com os erros de promises é pouco, eu preferi somente mostrar qual é o erro e sua mensagem.
// ---------- Lógica ----------
import { conectaApi } from "./conecta-api.js";
const lista = document.querySelector('[data-lista]');
listaVideo();
// ---------- Funções ----------
export default function constroiCard (titulo, descricao, url, imagem) {
const video = document.createElement('li');
video.classList.add = 'videos__item';
video.innerHTML = `
<iframe width="100%" height="72%" src="${url}"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="descricao-video">
<img src="${imagem}" alt="logo canal alura">
<h3>${titulo}</h3>
<p>${descricao}</p>
</div>
`
return video
};
async function listaVideo() {
try {
const listaApi = await conectaApi.listaVideos();
listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)));
} catch (erro) {
lista.style.display = 'block';
lista.innerHTML = `<h2 class="mensagem__titulo">Não foi possível carregar a lista de vídeos.</h2><br>
<p>Tipo do erro: ${erro.status}</p>
<p>Mensagem: ${erro.mensagem}</p>
`
};
};
