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

Erro no console ao enviar pro servidor

Da um erro no console ao clicar no botão pra enviar os dados pro servidor.

HttpService.js:13 POST http://localhost:3000/negociacoes 500 (Internal Server Error)
post @ HttpService.js:13
sendPost @ post.html:54
onclick @ post.html:32

código do post.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>

    <body class="container">
        <form class="form">

            <div class="form-group">
                <label for="data">Data</label>
                <input type="date" id="data" class="form-control" required autofocus />
            </div>

            <div class="form-group">
                <label for="quantidade">Quantidade</label>
                <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required />
            </div>

            <div class="form-group">
                <label for="valor">Valor</label>
                <input id="valor" type="number" class="form-control" min="0.01" step="0.01" value="0.0" required />
            </div>

            <button class="btn btn-primary" type="submit" onclick="sendPost(event)">Enviar dados para servidor</button>
        </form>
        <script src="app/services/HttpService.js"></script>
        <script>
            function sendPost(event) {

                event.preventDefault();

                console.log("Enviando post");

                let $ = document.querySelector.bind(document);
                inputData = $('#data');
                inputQuantidade = $('#quantidade');
                inputValor = $('#valor');

                let negociacao = {
                    data: inputData.value,
                    quantidade: inputQuantidade.value,
                    valor: inputValor.value
                };


                new HttpService()
                    .post('/negociacoes', negociacao)
                    .then(() => {
                        inputData.value = '';
                        inputQuantidade.value = 1;
                        inputValor.value = 0.0;
                        inputData.focus();
                        alert('Negociação enviada com sucesso');
                    })
                    .catch(erro => console.log(`Não foi possível enviar a negociação: ${erro}`));
            }
        </script>
    </body>

</html>

classe HttpService:

class HttpService {
    _ErrorHandler(res) {
        if (!res.ok) throw new Error(res.statusText)
        return res
    }

    get(url) {
        return fetch(url)
            .then(res => this._ErrorHandler(res))
            .then(res => res.json());
    }
    post(url, dado) {
        return fetch(url, {
            headers: { 'Content-Type': 'aplication/json' },
            method: 'post',
            body: JSON.stringify(dado)
        })
            .then(res => this._ErrorHandler(res));
    }
}

Alguém pode me ajudar por favor?

4 respostas

Fala aí Lucas, tudo bem? Qual a resposta do servidor? Para pegá-la, abre o console do navegador (F12), vá na aba Rede (Network) e quando estiver nessa aba faça a requisição.

Provavelmente você irá ver uma linha vermelha, clica nela e seleciona a aba "Preview".

O erro 500 pode ser por N motivos.

Fico no aguardo.

solução!

Boa noite, Lucas! Como vai?

Uma coisa que eu percebi é que ao enviar a requisição vc faz:

post(url, dado) {
        return fetch(url, {
            headers: { 'Content-Type': 'aplication/json' },
            method: 'post',
            body: JSON.stringify(dado)
        })
            .then(res => this._ErrorHandler(res));
    }

Contudo, veja que o Content-Type está com o valor aplication/json quando o correto seria application/json! Faça essa correção e veja se as coisas passam a funcionar da forma como vc esperava!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Corrigi esse erro, mas agora está dando outros dois erros.

Erro #1:

HttpService.js:3 Uncaught ReferenceError: System is not defined
    at HttpService.js:3

Erro #2:

ncaught ReferenceError: HttpService is not defined
    at sendPost (post.html:54)
    at HTMLButtonElement.onclick (post.html:32)

Conclui a ultima aula do curso avançado de JS, quando fui acessar essa pagina pra ver se estava tudo ok tive esses dois erros, o primeiro aparece assim que a pagina carrega, o segundo apenas quando clico no botão.

Boa, Lucas! Que bom que conseguiu resolver o problema anterior!

Eu vi que vc já abriu esse outro tópico referente a esse dois novos erros. Então para organizar melhor as coisas e não misturar os problemas eu darei esse tópico aqui como encerrado e deixarei esse novo assunto se desenrolar nesse outro tópico que vc criou!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!