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

Programação
#1

image
image.png1366×768 96.2 KB

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

#2 
 .... 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

#3

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!

#4

funciona, ele deve es

funciona ele deve estar usando um orm como sequelize.

#5

acredito que voce tem que fazer

body: JSON.stringify(contato)
#6

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

#7

Estudo, to aprendendo a usar sequelize e express

#8

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

#9

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

#10

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);
#11

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
}))
#12

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

1 curtida
#13

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)

#14 
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

#15

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

#16

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.

#17

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 .

#18

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

#19

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

#20

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)
}