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

Não estou conseguindo implementar o método POST no projeto

Estou tentando implementar o método post para enviar a minha ListaNegociações para o servidor local, mas estou tendo algumas dificuldades na implementação.

// Código implementado no HttpService.js - Acredito estar correto essa parte
    post(url, dado) {
        return new Promise((resolve, reject) => {

            let xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.onreadystatechange = () => {

                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        resolve(JSON.parse(xhr.responseText));
                    } else {
                        reject(xhr.responseText);
                    }
                }
            };
            xhr.send(JSON.stringify(dado)); // JSON.stringify converts an object into a string (format JSON)
        });
    }

1) Em NegociacaoService.js criei o método enviaNegociacoes que deveria retornar na sua Promise um erro ou código para envio dos dados ao server. Estou na dúvida no que devo inserir como segundo parâmetro "dado". Imaginei que seria o objeto ListaNegociacoes ou uma variável negociacões. 2) Como implementar no meu "resolve" o código que deveria converter a minha ListaNegociacoes em um JSON (string), para ser enviado corretamente para o servidor local?

    enviaNegociacoes(){

        return new Promise((resolve, reject) => {

            this._http
            .post('negociacoes/semana', /*O QUE COLOCO AQUI?*/)
                .then(negociacoes => { 
                    resolve( /* CÓDIGO AQUI */)
                })
                .catch(erro => {
                    console.log(erro);
                    reject('Não foi possível enviar as negociações');
                })
        }); 
    }

Como estou seguindo o padrão MVC, como devo instanciar corretamente a chamada do método enviaNegociacoes()?

    enviaNegociacoes(){
        let service = new NegociacaoService();

        service.enviaNegociacoes();
    }
4 respostas

Boa noite, William! Como vai?

Na realidade, o método enviaNegociacoes() não deve retornar uma nova Promise, mas sim a Promise do método post(). Ficaria mais ou menos assim:

enviaNegociacoes(negociacoes){

     return this._http.post('negociacoes/semana', negociacoes); 
}

E para usar esse método vc faria como a seguir:

const service = new NegociacaoService();
service.enviaNegociacoes(listaNegociacoes);

Veja que nesses trechos eu também já demonstrei que o enviaNegociacoes() precisará receber a lista de negociações que serão enviadas ao servidor.

Veja se assim as coisas funcionam da forma como vc esperava.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Obrigado pelo retorno, Gabriel!

Inseri o código que você me enviou, mas deu o seguinte erro:

HttpServices.js:53 POST http://localhost:3000/negociacoes/semana 404 (Not Found)
(anonymous) @ HttpServices.js:53 
HttpServices.js:49 Uncaught (in promise) Cannot POST /negociacoes/semana
xhr.onreadystatechange    @    HttpServices.js:49
XMLHttpRequest.send (async)        
(anonymous)    @    HttpServices.js:53
post    @    HttpServices.js:35
enviaNegociacoes    @    NegociacaoService.js:102
enviaNegociacoes    @    NegociacaoController.js:80
onclick    @    (index):42

Coloquei o código da linha 53

// Linha 53
xhr.send(JSON.stringify(dado)); // JSON.stringify converts an object into a string (format JSON)

Não seria necessário realizar uma manipulação da ListaNegociacoes e apontar um outro local (diferente de 'negociacoes/semana'?

Estou também com outras dúvidas:

1) Quando eu chamar o método POST ele irá sobrescrever as negociações da semana, semana passada e semana retrasada?

2) Ainda sobre essas negociações, eu sei que no método importaNegociacoes, chamamos o método GET com o parâmetro URL, para solicitar o JSON e inserir as negociações na nossa tabela, porém, onde essas negociações estão armazenadas? Fiquei procurando na pastas pastas do treinamento e não encontrei nada. Pensei no parâmetro da URL, mas não entendi como e onde essas negociações (JSON) estão armazenadas e são carregadas.

3) Por quê você utilizou const ao invés da declaração por bloco (let)?

let service = new NegociacaoService();
// ou
const service = new NegociacaoService();
solução!

Opa, William! Vamos lá!

Primeiro de tudo, veja que a mensagem de erro diz:

Cannot POST /negociacoes/semana

Isso significa que não é possível fazer uma requisição do tipo POST para a URL /negociacoes/semana. Por isso está dando esse erro. A API provavelmente só consegue responder a requisições do tipo GET para devolver a lista de negociações da semana.

1) Quando eu chamar o método POST ele irá sobrescrever as negociações da semana, semana passada e semana retrasada?

Depende da URL que vc está acessando e do que a API está programada para fazer.

2) Ainda sobre essas negociações, eu sei que no método importaNegociacoes, chamamos o método GET com o parâmetro URL, para solicitar o JSON e inserir as negociações na nossa tabela, porém, onde essas negociações estão armazenadas? Fiquei procurando na pastas pastas do treinamento e não encontrei nada. Pensei no parâmetro da URL, mas não entendi como e onde essas negociações (JSON) estão armazenadas e são carregadas.

Elas estão armazenadas na API que é disponibilizada para o treinamento. Esse código da API não é tratado durante o curso.

3) Por quê você utilizou const ao invés da declaração por bloco (let)?

O let é utilizado quando iremos alterar a variável. Como no caso do meu código aquele service não iria mudar em momento nenhum, então o ideal seria utilizar o const como fiz.

Obrigado Gabriel! Deu uma boa esclarecida!