提取帖子给我未定义的发布数据? [英] fetch post is giving me undefined for the posted data?
问题描述
学习如何使用Sapper.我有一个具有表单的组件(该表单具有一个用于输入电子邮件地址的字段),并使用访存将数据发布到服务器句柄.当我发布数据并尝试记录我发布的数据时,它记录为未定义.我不知道为什么,需要帮助找出答案.
Learning how to use Sapper. I have a component with form (the form has one field to enter an email address) and use fetch to post the data to the serverhandle. When I post the data and try to log the data I posted, it logs Undefined. I have no idea why and need help to figure it out.
这是表单的组成部分,并获取邮政编码:
Here is my component with the form and fetch post code:
<script>
let emailvalue
let url = "posthandle"
async function handleSubmit(event) {
console.log(event);
console.log(event.target);
emailvalue = event.target.email.value;
console.log("this is from the variable--data--:" + content)
// ******** Here is the Fetch() code
fetch(url, {
method: 'POST',
body: JSON.stringify(emailvalue),
headers: {
'Content-Type': 'application/json'
}
})
.then(r => {
//this is gives the error that res stream is locked console.log(r.json())
consolde.log(r)
r.json()
.then(function(result) {
// this logs [object object]
console.log("let us see" + result)
})
})
.catch(err => {
// POST error: do something...
console.log('POST error', err.message)
})
//post code example https://stackoverflow.com/questions/55393685/js-sapper-posting-data-to-server-the-right-way
}
</script>
<p> {emailvalue} </p>
<form on:submit|preventDefault="{handleSubmit}">
<label for="email">Email</label>
<input required type="email" id="email" />
<button type="submit">Create account</button>
</form>
这行内容显示为:console.log(让我们看看" +结果)显示[object Object],我不明白为什么?
The line that reads: console.log("let us see" + result) is showing [object Object] and I don't understand why?
我处理帖子的句柄:
export async function post(req, res, next) {
res.setHeader('Content-Type', 'application/json')
/* Retrieve the data */
var data = req.body;
// Do something with the data...
// it logs Undefined. Why?
console.log("Here's the posted data:" + data );
/* Returns the result */
return res.end(JSON.stringify({ success: true }));
}
为什么数据未定义?代码是否错误?我应该做些什么来读取数据"并管理表格中发布的实际数据吗?
why data is undefined? Is the code wrong? Should I do something to read "data" and manage the actual data posted in the form?
这是我的服务器代码(在@J之后)指出了正文解析器问题:
Here is my server code (after @J) pointed out the body-parser issue:
import express from 'express';
import * as sapper from '@sapper/server';
const sirv = require('sirv');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
const session = require('express-session');
const assets = sirv('static', {
maxAge: 31536000, // 1Y
immutable: true
});
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
cookie: { secure: true }
}))
app.use(assets, sapper.middleware()).listen(process.env.PORT, err => { if (err) console.log('error', err); });
如果我从具有响应的fetch函数获取console.log(r).我在控制台中得到了这个:响应{type:"basic",url:" http://localhost:3000/posthandle ,重定向:false,状态:200,确定:true,...}
If I console.log (r) from my fetch function which has the reponse. I get this in the console: Response {type: "basic", url: "http://localhost:3000/posthandle", redirected: false, status: 200, ok: true, …}
推荐答案
我必须npm install body-parser --save
并将其添加到server.js
.我必须添加bodyParser.urlencoded
和bodyParser.json
才能使其正常工作.
I had to npm install body-parser --save
and add it to the server.js
. I had to add bodyParser.urlencoded
and bodyParser.json
to get it to work.
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
// const express = require('express')
const app = polka()
const bodyParser = require('body-parser')
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});
这篇关于提取帖子给我未定义的发布数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!