Não to conseguindo enviar os parametros da requisição fetch

23 respostas Resolvido
javascript
Alysson_Alves1


já tentei enviar um objeto direto no body, ms não vai, ele chega l´como null, e desse jeito ai tbm.

23 Respostas

rodriguesabner
.... FROM contatos AS contatos.

Isso funciona??


Q erro tá dando? Se tá retornando null vc tem que verificar o back end. Faz um teste de requisição usando Postman ou Insomnia, aí vc vê se o erro que vai dar é o msm

Lucas_Camara

O POST está configurado na raiz do projeto mesmo (/) ? Não deveria estar no path /contatos? Qual erro que dá?


Evite mandar a imagem do código pois não ajuda na maioria dos casos. Copie o código relevante à dúvida e cole no post.

Vlw!

thimor

funciona, ele deve es

funciona ele deve estar usando um orm como sequelize.

thimor

acredito que voce tem que fazer

body: JSON.stringify(contato)
rodriguesabner

Mas qual o objetivo? Até pq ele manteve o nome da table

Alysson_Alves1

Estudo, to aprendendo a usar sequelize e express

Alysson_Alves1

eu fiz uma rota com express que recebe um post e adiciona na tabela mysql, eu já fiz o body-parser, mas o problema ta no fetch , que não envia os dados que deveria enviar

Lucas_Camara

Esse endpoint POST está esperando um json (Content-Type: application/json)?

Alysson_Alves1

essa é a fetch

function adicionarContato() {

   const contato = new FormData(document.querySelector("[name=form]"));
   
   /*{
      nome: contato_nome.value,
      email: contato_email.value,
      numero: contato_numero.value
   }*/
   fetch('http://localhost:8080/',{
      method: 'POST',
      body: contato,
      mode: 'cors',
      cache: 'default'
   }
   )
      .then(() => {
    
         document.getElementById("lista").innerHTML += '<li class="contato"> '
         + `<p> Nome:${contato.nome} </p>`
         + ` <p> E-mail: ${contato.email}</p>`
         + `<p>Numero: ${contato.numero} </p>`
         + '</li>'
})
   
}

essa é a rota

const express = require('express');

const parser = require('body-parser');

const crud = require('./dao/dao.js');

const app = express();

app.use(parser.json());

//

app.get('/', (req, res) => {

    res.statusCode = 200

     crud.listAll().then((contas)=>res.status(200).send(contas));

                         

});

app.post('/', (req, res) => {

    //const nome = req.param('nome')

    //const email= req.param('email')

    //const numero= req.param('numero')

  

    crud.create(req.body.nome,req.body.email,req.body.numero);
Lucas_Camara

Não confuda uma requisição com FormData e json. Com Formdata, os dados são enviados de um “jeito” diferente (application/x-www-form-urlencoded) do que com json (application/json).

E reparei que vc está usando parser.json(). Com isso, vc pode enviar os dados via json mesmo. Mas se quiser enviar via submit msm, pelo que li, no express, vc deve usar esse midleware:

app.use(express.urlencoded({
  extended: true
}))
Alysson_Alves1

na vdd a ideia era enviar com o fetch, sem o form, o form foi uma tentativa de enviar os dados

Alysson_Alves1

o erro que ta dando é esse
SequelizeValidationError: notNull Violation: contatos.nome cannot be null,
notNull Violation: contatos.email cannot be null,
notNull Violation: contatos.numero cannot be null
at C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\sequelize\lib\instance-validator.js:74:15
at tryCatcher (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise.js:547:31)
at Promise._settlePromise (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise.js:729:18)
at Promise._fulfill (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise.js:673:18)
at PromiseArray._resolve (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise_array.js:127:19)
at PromiseArray._promiseFulfilled (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise_array.js:145:14)
at Promise._settlePromise (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise.js:609:26)
at Promise._settlePromise0 (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\promise.js:729:18)
at _drainQueueStep (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\async.js:93:12)
at _drainQueue (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\async.js:86:9)
at Async._drainQueues (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\async.js:102:5)
at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\HarutoX\Desktop\js\AprenderDoZero\node_modules\bluebird\js\release\async.js:15:14)
at processImmediate (internal/timers.js:456:21)

Alysson_Alves1
const contato = `{

"nome": "${contato_nome.value}",

"email": "${contato_email.value}",

"numero": "${contato_numero.value}"

}`

   fetch('http://localhost:8080/',{

      method: 'POST',

      body: JSON.parse(contato),

      mode: 'cors',

      cache: 'default'

   }

tentei mandara assim agr, msm assim n funciona

Alysson_Alves1

realizei um post, com insomnia e funcionou, mas n to conseguindo realizar a fetch msm assim

thimor

eu sugiro que voce utilize json.
as alteracoes sao simples. basta fazer isso no express:

app.use(express.json());

ficaria mais ou menos assim:

require('dotenv').config();
const express = require('express');
const routes = require('./routes');
const cors = require('cors');
require('./database');

const app = express();

app.use(cors());
app.use(express.json({limit: '5mb'}));
app.use(routes);

app.use((req, res, next) =>{
    const error = new Error('Rota não encontrada');
    error.status = 404;
    next(error);
})

app.use((error, req, res, next) => {
    res.status(error.status || 500)
    res.json({ error: error.message })
})

app.listen(process.env.PORT);

e no seu fetch no body, voce passa

body: JSON.stringify(contato)

para montar o objeto contato voce pode fazer assim:

contato = {}.
contato.nome = document.getElementById('nome')
contato.email = document.getElementById('email')
contato.numero = document.getElementById('numero')

acredito que o seu fetch nao esta funcionando pq esse seu query selector

nao pega nenhum valor do form.

Alysson_Alves1

eu já to usando isso, o problema n ta na rota, eu usei o insomnia pr fzr o post e deu super certo. já tentei passar uma string direto, já tentei fzr uma string e fzr parse pra json, jtentei .json(), já tentei passar o objeto direto, já tentei formData, mas n vai, ele chega lá null .

Lucas_Camara

Cara, não sei se influencia, mas tenta fazer o fetch sem as propriedades mode: ‘cors’ e cache: ‘default’, para ver se muda algo.

Alysson_Alves1

fiz isso tbm, apesar de retirar um dos erros que tava dando, ele permanece null

Lucas_Camara

No express, deixe o middleware assim:

app.use(express.json({
  type: ['application/json']
}))

Aliás, qual a versão do express que tu tah usando?


Outra coisa seria tentar setar os headers no fetch:

fetch('http://localhost:8080/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.parse(contato)
}
Alysson_Alves1

não creio que seja algum problema na rota, já que ele consegue receber o json do postman e do insomnia.

vdd, pode ser isso

Lucas_Camara

Verdade, tinha esquecido que vc conseguiu fazer a requisição pelo postman.

Alysson_Alves1

inda com o mesmo problema, tem alugum meio alternativo de fzr esse post? Outro problema que apareceu durante os testes é que ele tá recebendo o valor do cdastro de outro cliente. tipo eu faço o cadastro no postman, ela é feita normalmente, e quando isso acontece a resposta é os mesmos dados usados no cadastro, só que ai eu vou no meu console pra fzr o cadastro, nesse caso não funcion, ele retorna os valores da outra requisição, mesmo eu resetando o server. eu to usando res.send(req.body) pra retornar os dados

rodriguesabner
Solucao aceita

vc pode usar o Axios.

Criado 3 de agosto de 2020
Ultima resposta 3 de ago. de 2020
Respostas 23
Participantes 4