如何从 reactjs 和 API 中检索数据

Posted 2023-03-07

【中文标题】如何从 reactjs 和 API 中检索数据

【英文标题】：How to retrieve data from reactjs and API

【发布时间】：2019-03-16 22:08:29

【问题描述】：

我正在尝试将表单数据从响应发布到节点后端，该怎么做？ 我的反应代码是：

import fetch from 'isomorphic-fetch';

export function createBio (data) 

    console.log(data);

    return fetch('http://localhost:3001/user/create', 
        method: 'POST',
        mode: 'no-cors',
        body: JSON.stringify(data),
        headers: 

            'Content-Type': 'application/json',

        

    ).then(res => 
        return res;
    ).catch(err => console.log(err));

我的 NodeJs 代码

router.post('/create', (req,res,) => 

    var user = new User(title: req.params.title || "Untitled Note", body: req.params.body);
    user.save();

);

如何检索数据

【问题讨论】：

console.log req.params.body，这就是你的数据应该在的地方

错误未定义 :(

req.body怎么样

像空的

并且createBio中记录的数据不为空？

【参考方案1】：

req.param() 在请求的 url 路径、正文和查询字符串（按此顺序）中搜索指定参数。如果具有给定name 的请求中不存在任何参数值，则返回undefined，如果指定，则返回可选的defaultValue。

url路径参数(req.params)

例如请求/create/4 路由/create/:id 具有url 路径参数req.params.id :id 这个id你可以改变任何你想要的东西，但是你应该在你的参数之前添加“：”

正文参数 (req.body)

例如具有可解析主体（例如 JSON、url 编码或 XML）的请求具有等于其解析值的主体参数

如果你想得到标题，可以写req.body.title

对于您的情况，我建议您使用 req.body

您的后端 API

//http://localhost:3001/user/create
    router.post('/create', (req,res) => 

    const user = new User(
          
          title: req.body.title ===null ? 'Untitled Note' : req.body.title, 
          text: req.body.text
          );
    user.save();

);

您应该确定您的数据包含哪些价值

data = 
title: '?',
text: '?'
;

你的收获

import fetch from 'isomorphic-fetch';

export function createBio (data) 

    console.log(data);

    fetch('http://localhost:3001/user/create', 
        method: 'POST',
        mode: 'no-cors',
        body: JSON.stringify(data),
        headers: 

            'Content-Type': 'application/json',

        

    ).then(res => 
        return res;
    ).catch(err => console.log(err));

确保你的道路是正确的

无论如何，我使用 'axios' 来检索数据

router.post('/'),
    (req, res) => 
        const newPost = new Post(
            eventTitle: req.body.eventTitle,
            eventText: req.body.eventText
        );

        newPost.save().then(post => res.json(post));
    );

axios

const postData = 
title: '?',
text: '?'
;
     axios
            .post('/api/posts', postData)
            .then(res => console.log(res))
            .catch(err => console.log(err));

获取参数

**!But this title should be assigned a value. not a null value**


router.post('/:title'),
        (req, res) => 
            const newPost = new Post(
                eventTitle: req.params.title,
                eventText: req.body.eventText
            );

            newPost.save().then(post => res.json(post)););

---

   const postData = 
    title: '?',
    text: '?'
    ;
         axios
                .post(`/api/posts/$postData.title`, postData.text)
                .then(res => console.log(res))
                .catch(err => console.log(err));

如果您对 fetch 有任何疑问，可以使用此https://developer.mozilla.org/en-US/。

我希望这对你有用。其实我没用过fetch，但是axios也一样。

PS：你应该为你的 server.js 添加这个以从客户端获取价值。 Node.js 正文解析中间件。解析传入的请求正文 处理程序之前的中间件，在 req.body 下可用 属性。

const bodyParser = require('body-parser');
// for parsing application/x-www-form-urlencoded
app.use(bodyParser.urlencoded( extended: false ));
// for parsing application/json
app.use(bodyParser.json());

您的评论和问题的最后回答。

首先，您应该将 proxy 添加到您的客户端 package.json 你可以npm I concurrently同时运行你的服务器和客户端

您的 package.json 应该包含 --- 我没有创建服务器 json，这可能是错误的格式。但只是一个测试。 **的部分应该写在服务端的package.json文件中！如果你不想使用它，你可以专注于代码，它会解决你的问题。

  "name": "react",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "concurrently": "^4.0.1",
    "express": "^4.16.4",
    "fetch": "^1.1.0",
    "node-fetch": "^2.2.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4",
    "isomorphic-fetch": "^2.2.1"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    **"server": "node server.js",**
    **"client": "npm start",**
    **"dev": "concurrently \"npm run server\" \"npm run client\"",**
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  ,
  "proxy": "http://localhost:5000"

npm I node-fetch 在客户端

  import React, Component from 'react';
    //import axios from 'axios';
    //import fetch from 'node-fetch';
  import fetch from 'isomorphic-fetch';
    class SendMessage extends Component 
        constructor(props) 
            super(props);
            this.state = 
                title: '',
                text: ''
            ;

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    

    onSubmit(e)
        e.preventDefault();
        const newUser = 
            title: this.state.title,
            text: this.state.text,
        ;
        // axios.post('/users/create', newUser)
        //     .then(res => console.log(res))
        //     .catch(err => console.log(err));



        fetch('/users/create', 
            method: 'post',
            headers: 
                'Content-Type': 'application/json'
            ,
            body: JSON.stringify(newUser)
        ).then(res=>res.json())
            .then(res => console.log(res));


    

    onChange(e)
        this.setState([e.target.name]:e.target.value)

    

    render() 
        return (
            <div>
                <form onSubmit=this.onSubmit>
                    <input type="text" name='title' onChange=this.onChange value=this.state.title placeholder="title"/>
                    <input type="text" name='text' onChange=this.onChange value=this.state.text placeholder="text"/>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        );
    


export default SendMessage;

服务器端 server.js

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



//import route
const users = require('./route');

var app = express();


//Body parser middleware
app.use(bodyParser.urlencoded(extended: false));
app.use(bodyParser.json());


// Use routes
app.use('/users', users);



const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server running on port $port`));

服务器端 route.js

const express = require('express');
const router = express.Router();

router.post('/create', (req,res) => 

    console.log(req.body);
    const user =
        
            title: req.body.title ===null ? 'Untitled Note' : req.body.title,
            text: req.body.text
        ;
    res.status(200).json(user);

);

module.exports = router;

【讨论】：

如有任何问题，请留言。我会尽快回复。

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。原点'localhost:3002'

让我下载 fetch npm，等一下

将 "proxy": "localhost: 3001" 添加到您的客户端 package.json 中然后 fetch('/user/create')

看最后一个答案，希望对你有帮助

【参考方案2】：

当您的 Node.js 服务器正在侦听“create”时，您正在向“/user/create”发送请求。尝试改变

fetch('http://localhost:3001/user/create'

到

fetch('http://localhost:3001/create'

【讨论】：

如果你有一个像const userRoute = require('./routes/user'); 这样的路由器并使用app.use('/user', userRoute); 将它添加到你的应用程序中，那么他的代码没有问题，但我们不知道他是如何设置他的服务器而不看他的服务器代码。

【参考方案3】：

我最好的方法，开始创建文件 api.js

import axios from "axios";

export default 
    user: 
        createBio: data => axios.post(`$process.env.API_HOST/user/create`, data).then(res => res),
    

如果你使用 redux，你可以从你的组件或操作中调用函数 createBio，

如果您遇到问题 Access-Control-Allow-Origin 使用 CORS

【参考方案4】：

您可以使用body-parser 中间件来解析您的请求正文

在你的 server.js 中：

const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json(limit: '10mb'));

并假设您向服务器发送一个对象，例如：

let data = 
    myProp: 'myVal1'

然后你可以在请求中得到它：

router.post('/create', (req,res,) => 
    let value = req.body.myProp;
    console.log('value in body: ' + value);
    // execute...
);

这将记录：

value in body: myVal1

我还强烈建议您使用 Axios 而不是 fetch 来处理您的请求，并阅读我的回答 in this post，我会在其中讨论一些差异以及如果您已经在使用 fetch 如何实现 axios。例如，这样您就不需要对数据进行字符串化，并且可以解决那里讨论的其他问题。

如果您使用 Axios（带有 async/await），请像这样设置您的请求对象：

let reqObj = 
    method: 'POST',
    headers: 
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8'
    ,
    url: 'http://localhost:3001/user/create',
    data:  
        myProp: 'myVal1'
    
;

并将请求发送到 axios：

let response = await axios(reqObj);

【讨论】：

@david 如果您尝试此解决方案，您是否在控制台中登录了某些内容？您能否将您的 package.json 和您的服务器配置添加到您的问题中，以便我们看看还有什么可能发生的？