fetch post дает мне undefined для опубликованных данных?

Изучение использования Sapper. У меня есть компонент с формой (в форме есть одно поле для ввода адреса электронной почты), и я использую выборку для отправки данных на дескриптор сервера. Когда я публикую данные и пытаюсь зарегистрировать опубликованные мной данные, в журнале регистрируется Undefined. Я понятия не имею, почему, и мне нужна помощь, чтобы понять это.

Вот мой компонент с формой и почтовым кодом:

<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], и я не понимаю, почему?

Мой дескриптор для управления постом:

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

}

почему данные не определены? Код неправильный? Должен ли я что-то делать для чтения «данных» и управления фактическими данными, размещенными в форме?

Вот мой серверный код (после @J) указал на проблему парсера тела:

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

Если я console.log (r) из моей функции выборки, которая имеет ответ. Я получаю это в консоли: Response {type: "basic", url: "http://localhost:3000/posthandle ", перенаправлено: false, status: 200, ok: true,…}


person Marco    schedule 27.09.2019    source источник
comment
Вы проверили, что emailvalue не undefined?   -  person JLRishe    schedule 27.09.2019
comment
is showing [object Object] and I don't understand why? потому что это то, что object.toString() возвращает ... попробуйте console.log("let us see", result), и вы увидите результат   -  person Jaromanda X    schedule 27.09.2019
comment
@JaromandaX Спасибо, что сработало, вы спасаете жизнь. Я весь день пытался понять это. Теперь перейдем к дескриптору сервера, получившему данные. В console.log отображается undefined? Как мне получить доступ и получить значение, которое я ввожу в форму, если мой код выборки правильный, почему переменная данных не определена? Любая помощь приветствуется.   -  person Marco    schedule 27.09.2019
comment
@JLRishe Да, значение электронной почты считывается, и оно показывает правильное значение, которое я ввожу в форму и правильно регистрирую.   -  person Marco    schedule 27.09.2019
comment
у вас есть экспресс body-parser модуль?   -  person Jaromanda X    schedule 27.09.2019
comment
@JaromandaX Нет. Я не знаю. Нужно ли мне его установить и импортировать в server.js?   -  person Marco    schedule 27.09.2019
comment
да, это, вероятно, решит вашу проблему   -  person Jaromanda X    schedule 27.09.2019
comment
@JaromandaX Теперь мы к чему-то приближаемся. Я установил body-parser и настроил его в server.js ... теперь data = body.req показывает пустой объект {} и получил сообщение об ошибке, когда я ввел console.log (r) в функцию выборки. Ошибка гласит: VM695 form.eaa48bbd.js: 135 Uncaught (в обещании) TypeError: не удалось выполнить 'json' в 'Response': основной поток заблокирован   -  person Marco    schedule 27.09.2019
comment
@JaromandaX Неважно. Я заставил его работать. Спасибо за помощь. Если вы разместите свой ответ в сообщении, я выберу его как правильный, и вы получите ответ на этот вопрос. Хороших выходных.   -  person Marco    schedule 27.09.2019
comment
Вы заставили его работать с полькой сервером вместо Express?   -  person Daniel Rodríguez Meza    schedule 23.05.2020
comment
@ DanielRodríguezMeza Нет. Я использовал expressjs.   -  person Marco    schedule 26.05.2020
comment
@Marco Я переключился на Express, но, несмотря на то, что я получаю 404 при попытке доступа к маршруту, моя структура почти такая же, как у вас.   -  person Daniel Rodríguez Meza    schedule 26.05.2020
comment
@ DanielRodríguezMezado Я не могу помочь вам, не увидев вашего кода. Задайте вопрос, опубликуйте свой код и напишите мне сюда со ссылкой на ваш вопрос, и тогда я смогу взглянуть и попытаться помочь. Поскольку я разместил этот вопрос здесь, я провел время с svelte и sapper, и он работает с expressjs   -  person Marco    schedule 29.05.2020


Ответы (1)


Пришлось npm install body-parser --save и добавить его в server.js. Мне пришлось добавить bodyParser.urlencoded и bodyParser.json, чтобы заставить его работать.

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);
  });
person Orhan    schedule 17.07.2020