Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Erro ao excluir - failed to fetch

Esse é o erro que aparece no console:

DELETE http://localhost:3000/livros/3 net::ERR_EMPTY_RESPONSE (anonymous) @ remove-livro.js:15 remove-livro.js:24 TypeError: Failed to fetch

testei com console.log a fetch e ela pega o id, mas na rota o id não é pego no req.params.id

remove-livro.js:

// função com evento de clique para deletar um livro do banco de dados

// selecionar a tabelade livros
let tabelaLivros = document.querySelector('#livros');
// adicionar na tabela um evendo de ouvinte para (click)
tabelaLivros.addEventListener('click', (evento) => {
// pegar o evendo gerado e o elemento clicado
    let elementoClicado = evento.target;

// bloco if, verifica se o elemento clicado tem o data-type == remoção
    if (elementoClicado.dataset.type == 'remocao') {
// se o elemento clicado tiver o data-type == remoção é pegado o seu data-ref juntamente com o id
        let livroId = elementoClicado.dataset.ref;
// é feita uma requisição assincrona (AJAX) com a fetch api para a URL para (/livro/ id do livro) com o metodo DELETE
        fetch(`http://localhost:3000/livros/${livroId}`, { method: 'DELETE' })
// caso tudo ocorra corretamente a fetch api devolve a resposta como uma promise
            .then(resposta => {

// como resposta a promise o item com o id selecionado é removido
                let tr = elementoClicado.closest(`#livro_${livroId}`);
                tr.remove();
            })
// caso haja algum erro o metodo cai no bloco catch e mostra o erro no consoles
            .catch(erro => console.log(erro));

    }

});

rota para delete:

   app.delete('/livros/:id', function(req, resp) {
// constante id onde vai ficar salvo por parametro o id do livro a ser deletado, é feita uma requisição para pegar o parametro id
        const id = req.params.id;
        console.log(id);
// Iniciado uma instância do objeto @LivroDao com parametro do banco de dados @db
        const livroDao = new LivroDao(db);
// Chamado uma função de remoção @remove do objeto @LivroDao como resposta a Promise declarada em @LivroDao com o parametro id do livro
        livroDao.remove(id)
// caso tudo ocorra corretamente a resposta vai ser o status 200 (ok) do http e termirnar a promise
                .then(() => resp.status(200).end())
// bloco catch para caso haja algum erro esse erro seja declarado no console
                .catch(error => console.log(error));
    });

configuração do middleware:

// criado middleware para pegar arquivo estatico
// delegando ao app o uso do metodo @use do @express
// primeiro parametro, caminho para a rota
app.use('/estatico',
// segundo parametro, uso do metodo @static do @express que serve para pegar aquivos estaticos
        express.static('src/app/public')
    );

remove do livro-dao:

/ função para remover um livro usando como parametro o id
    remove(id) {
// criado a promise que irá ser usada para atualiza o livro com os parametros @resolve e @reject
        return new Promise((resolve, reject) => {
// chamada ao banco de dados fazendo uso metodo @get do @sqlite para selecionar o livro pelo id
            this._db.get(
// delete do livro na tabela livros
                `DELETE * FROM livros WHERE id = ?`,
// array com o id do livro a ser deletado
                [id],
// declarando que caso haja erros deve-se cair no bloco @error e retornar com o @reject da promise uma mensagem e parar a tansação
                (error) => {
                    if (error) {
                        return reject('Não foi possível remover o livro!');
                    }
// declarando que caso não haja erros deve-se cair no bloco @resolve da promise e o mesmo deve resolver a promise sem retornar um resultado
                    return resolve();
                }
            );
        });
    }
4 respostas

Boa noite, David! Como vai?

Vc poderia compartilhar o seu código no github e mandar o link aqui? Assim eu poderia dar uma olhada melhor no que está acontecendo para te ajudar de uma forma mais efetiva!

Grande abraço e bons estudos, meu aluno!

Boa tarde, segue o link:

https://github.com/DavidNatanael/Node.js_Inovando_com_JavaScript_no_backend

O restante das funcionalidades estão funcionando normalmente, até cheguei ao final do curso, mas o deletar realmente não consigo fazer funcionar.

Encontrei uma maneira de fazer funcionar, na rota para deletar eu troquei o parâmetro delete por get.

app.delete('/livros/:id', function(req, resp)

após a troca ficou assim:

app.get('/livros/:id', function(req, resp)

funcionou como deveria, só não sei se é o certo a se fazer.

solução!

Boa noite, David! Como vai?

Essa solução que vc implementou não é o ideal, pois o correto é trabalharmos usando os métodos HTTP correspondentes à operação que queremos fazer! Portanto, no caso da exclusão, o certo seria utilizar o método DELETE e não o GET!

Eu dei uma olhada no seu código e vi que o problema todo está no código do método de remoção do LivroDao!

class LivroDao {

    // Restante do código omitido.

    remove(id) {
        return new Promise((resolve, reject) => {
            this._db.get(
                `DELETE * FROM livros WHERE id = ?`,
                [id],
                (error) => {
                    if (error) {
                        return reject('Não foi possível remover o livro!');
                    }

                    return resolve();
                }
            );
        });
    }
}

module.exports = LivroDao;

Veja que a instrução SQL que vc fez foi DELETE * FROM livros WHERE id = ?, porém, o correto seria DELETE FROM livros WHERE id = ?, sem o * entre as palavras DELETE e FROM!

Remova esse asterisco, volte a rota para o método delete() como visto durante o curso ( e repetido logo a seguir ) e tudo deve funcionar como esperado!

app.delete('/livros/:id', function(req, resp) {
     // Restante do código omitido.
});

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!