1
resposta

[Bug] "TypeError: Failed to fetch" aparecendo no alert.

Olá! Meu código está identico ao da instrutora, porém o "alert" que está na função "criarVideo(evento{...})", retorna uma mensagem de erro padrão do JS: "TypeError: Failed to fetch". Em vez de "Não foi possível enviar o vídeo".

Seguem os códigos utilizados:

conectaApi.js

async function listaVideos() {
    const conexao = await fetch("http://localhost:3000/videos");
    const conexaoConvertida = await conexao.json();
    return conexaoConvertida;
}

async function criaVideo(titulo, descricao, url, imagem) {
    const conexao = await fetch("http://localhost:300/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){
        throw new Error("Não foi possível enviar o vídeo");
    }

    const conexaoConvertida = await conexao.json();
    return conexaoConvertida;
}

async function buscaVideo(termoBusca) {
    const conexao = await fetch(`http://localhost:3000/videos?q=${termoBusca}`)
    const conexaoConvertida = conexao.json();

    return conexaoConvertida;
}

export const conectaApi = {
    listaVideos, criaVideo, buscaVideo
}

criarVideo.js

import { conectaApi } from "./conectaApi.js";
const formulario = document.querySelector("[data-formulario]");

async function criarVideo(evento){
    evento.preventDefault();

    const imagem = document.querySelector("[data-imagem]").value;
    const url = document.querySelector("[data-url]").value;
    const titulo = document.querySelector("[data-titulo]").value;
    const descricao = Math.floor(Math.random()* 10).toString();

    try {
    await conectaApi.criaVideo(titulo, descricao, url, imagem);
  
    window.location.href = "../pages/envio-concluido.html";
    } catch(e) {
        alert(e);
    }
}

formulario.addEventListener("submit", evento => criarVideo(evento));
1 resposta

Oii, Lucas! Tudo bem?

O erro retornado "TypeError: Failed to fetch", geralmente ocorre quando há um problema na conexão com o servidor.

Como sugestão, tente limpar o cachê da sua máquina. Além disse, verifique se há algum firewall ou antivírus bloqueando a conexão entre a máquina e o servidor. E, outro detalhe, verifique se a conexão com a internet está estável.

Espero que as recomendações te ajude.

Bons estudos!