Não to conseguindo enviar os parametros da requisição fetch
23 Respostas
.... 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
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!
funciona, ele deve es
funciona ele deve estar usando um orm como sequelize.
acredito que voce tem que fazer
body: JSON.stringify(contato)
Mas qual o objetivo? Até pq ele manteve o nome da table
Estudo, to aprendendo a usar sequelize e express
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
Esse endpoint POST está esperando um json (Content-Type: application/json)?
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);
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
}))
na vdd a ideia era enviar com o fetch, sem o form, o form foi uma tentativa de enviar os dados
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)
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
realizei um post, com insomnia e funcionou, mas n to conseguindo realizar a fetch msm assim
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.
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 .
Cara, não sei se influencia, mas tenta fazer o fetch sem as propriedades mode: ‘cors’ e cache: ‘default’, para ver se muda algo.
fiz isso tbm, apesar de retirar um dos erros que tava dando, ele permanece null
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)
}
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
Verdade, tinha esquecido que vc conseguiu fazer a requisição pelo postman.
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
vc pode usar o Axios.
