使用 react js 和 express API 服务器发布一个带有 fetch 的对象

Posted 2023-02-22

【中文标题】使用 react js 和 express API 服务器发布一个带有 fetch 的对象

【英文标题】：Post an object with fetch using react js and express API server

【发布时间】：2017-12-30 11:39:18

【问题描述】：

我在使用 fetch 中的 post 方法时遇到了问题，因为我的服务器正在从客户端接收一个空对象。我已在客户端签入，无法发送我要发送的值。

这是我的服务器：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded(
    extended: true
));

// connection configurations
const mc = mysql.createConnection(
    host: 'localhost',
    user: 'root',
    password: '12345',
    database: 'node_task_demo',
    //socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
);

// connect to database
mc.connect();

// default route
app.get('/', function (req, res) 
    return res.send( error: true, message: 'hello' )
);

// Here where I'm calling in the client side
app.get('/todos', function (req, res) 
    mc.query('SELECT * FROM tasks', function (error, results, fields) 
        if (error) throw error;
        return res.send( error: false, data: results, message: 'Todo list' );
    );
);

// Search for todos with ‘bug’ in their name
app.get('/todos/search/:keyword', function (req, res) 
  var mensaje = 'Todos search list.';
    let keyword = req.params.keyword;
    mc.query("SELECT * FROM tasks WHERE task LIKE ? ", ['%' + keyword + '%'], function (error, results, fields) 
        if (error) throw error;
        return res.send( error: false, data: results, message: mensaje);
    );
);

// Retrieve todo with id
app.get('/todo/:id', function (req, res) 

    let task_id = req.params.id;

    if (!task_id) 
        return res.status(400).send( error: true, message: 'Please provide task_id' );
    

    mc.query('SELECT * FROM tasks where id=?', task_id, function (error, results, fields) 
        if (error) throw error;
        return res.send( error: false, data: results[0], message: 'Todos list.' );
    );

);

// Add a new todo
app.post('/todo/meterla', function (req, res) 

    let task = req.body.task;

    if (!task) 
        return res.status(400).send( error:true, message: 'Please provide task' );
    

    //var task = req.body.task;

    var query = mc.query("INSERT INTO tasks SET ? ",  task: task, function (error, results, fields) 
        if (error) throw error;
        console.log(task);
        return res.send( error: false, data: results, message: 'New task has been created successfully.' );
    );
);

//  Update todo with id
app.put('/todo', function (req, res) 

    let task_id = req.body.task_id;
    let task = req.body.task;

    if (!task_id || !task) 
        return res.status(400).send( error: task, message: 'Please provide task and task_id' );
    

    mc.query("UPDATE tasks SET task = ? WHERE id = ?", [task, task_id], function (error, results, fields) 
        if (error) throw error;
        return res.send( error: false, data: results, message: 'Task has been updated successfully.' );
    );
);

//  Delete todo
app.delete('/todo', function (req, res) 

    let task_id = req.body.task_id;

    if (!task_id) 
        return res.status(400).send( error: true, message: 'Please provide task_id' );
    
    mc.query('DELETE FROM tasks WHERE id = ?', [task_id], function (error, results, fields) 
        if (error) throw error;
        return res.send( error: false, data: results, message: 'Task has been updated successfully.' );
    );
);

// all other requests redirect to 404
app.all("*", function (req, res, next) 
    return res.send('page not found');
    next();
);

// port must be set to 8080 because incoming http requests are routed from port 80 to port 8080
app.listen(8081, function () 
    console.log('Escuchando por el puerto 8081');
);

// allows "grunt dev" to create a development server with livereload
module.exports = app;

这是我的客户：

import React,  Component  from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component 

  constructor(props) 
    super(props);
    this.state = data: "";
    this.state_2 = message: [];
    this.onSubmit = this.handleSubmit.bind(this);
  

  componentDidMount() 
     fetch('/todo/1')
    .then((response) => response.json())
    .then((responseJson) =>
      this.setState(
        message: responseJson.data
      );
    )
  

handleSubmit(e)
  e.preventDefault();
  var self = this;
  // On submit of the form, send a POST request with the data to the server.
  fetch('/todo/meterla',
    method: 'POST',
    body:
      task: self.refs.task.value
    
  )
  .then(function(response)
    return response.json()
  ).then(function(body)
    console.log(body);
    alert(self.refs.task.value)
  );


  render() 
    return (
      <div className="App">
        <div className="App-header">
          <img src=logo className="App-logo"  />
          <h2>Welcome to React</h2>
        </div>
        <form onSubmit=this.onSubmit>
          <input type="text" placeholder="task" ref="task"/>
          <input type="submit"/>
        </form>
        <p className="App-intro">
          Este es el resultado de la consulta = <b>JSON.stringify(this.state.message)</b>
        </p>
      </div>
    );
  


export default App;

【参考方案1】：

body 必须是字符串化的 + 不要忘记 content-type

 fetch('/todo/meterla',
    method: 'POST',
    body: JSON.stringify(
      task: self.refs.task.value
    ),
    headers: "Content-Type": "application/json"
  )
  .then(function(response)
    return response.json()
  ).then(function(body)
    console.log(body);
    alert(self.refs.task.value)
  );

【讨论】：

***.com/questions/45294748/…

【参考方案2】：

看起来这就是问题所在。

constructor(props) 
super(props);
this.state = data: "";
this.state_2 = message: [];
this.onSubmit = this.handleSubmit.bind(this);


componentDidMount() 
 fetch('/todo/1')
.then((response) => response.json())
.then((responseJson) =>
  this.setState(
    message: responseJson.data
  );
)

在componentDidMount() 中，您正在设置'message' 的状态。但那是在this.state_2。

我建议不要使用this.state_2，而是像这样构建您的状态：

this.state = 
  data: '',
  message: []

【参考方案3】：

尝试使用 axios 而不是 fetch 我像这样重写了你的代码，它工作得很好

服务器

const express     = require('express');
const  Client   = require('pg');
const bodyParser  = require('body-parser');
const app         = express();
const cors = require("cors");

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));

app.post('/api/insertUsers', function(req, res) 
// console.log(req);
console.log(req.body);
res.send(req.body);
); 

app.listen(3001, () => 
 console.log('listening on port 3001');
);

react（确保您已安装 axios）

handleSubmit(e) e.preventDefault(); var data = name: "zadiki", contact: "0705578809", email: "zadiki", message: "test", console.log("wow"); var url = ' http://localhost:3001/api/insertUsers'; axios.post(url,data) .then(response=>console.log(response)) .catch(e=>console.log(e))

【参考方案4】：

尝试像这样使用 fetch

     fetch(url, 
        method: "POST",
        mode: "cors",
        cache: "no-cache", 
        credentials: "same-origin", 
        headers: 
            "Content-Type": "application/json; charset=utf-8",
        ,
        redirect: "follow", 
        referrer: "no-referrer", 
        body: JSON.stringify(data)
    ).then(function (response) 
        return response.json();
    )
        .then(function (myJson) 
            console.log(myJson);
        );

【参考方案5】：

$(document).ready(()=>

    $("#formSignUp").submit(()=>

         fetch("/auth/sign/up",

            method:'POST',
            headers: 
                'Content-Type': 'application/x-www-form-urlencoded'
            ,
            body:$("#formSignUp").serialize(),
        )
        .then((response)=>response.json())
        .then(response=>

        ).catch(response=>

        );
        return false;
    );

);

【讨论】：

Este pega os dados do formulario e envia codificado , caso não especifique o Content-Type o parserbody não reconhecera