如何从ReactJS代码进行rest post调用？

我不熟悉ReactJS和UI，我想知道如何从ReactJS代码中进行简单的基于REST的POST调用

如果有任何示例，这将非常有用。

以下是一个示例：

它使用了

jquery.ajax

方法，但您可以轻松地将其替换为基于ajax的lib，如axios、superagent或fetch。

直接从：

---

（这是发布JSON，但您也可以这样做，例如，多部分表单。）

React对如何进行REST调用并没有真正的意见。基本上，您可以选择任何类型的AJAX库来完成此任务

使用简单的旧JavaScript最简单的方法可能是：

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(data);

在现代浏览器中，您也可以使用

如果您有更多的组件进行REST调用，那么将这种逻辑放在一个可以跨组件使用的类中可能是有意义的。例如，

RESTClient.post（…）

是基于特性和支持的ajax库比较列表。 我更喜欢只用于客户端开发，或者同时用于客户端和服务器端开发

---

有关

的详细信息，您可以安装superagent

npm install superagent --save

然后对服务器进行post调用

import request from "../../node_modules/superagent/superagent";

request
.post('http://localhost/userLogin')
.set('Content-Type', 'application/x-www-form-urlencoded')
.send({ username: "username", password: "password" })
.end(function(err, res){
console.log(res.text);
});  

---

另一个最近流行的软件包是：

安装：

npm安装axios——保存

基于承诺的简单请求

---

---

到2018年及以后，您将有一个更现代的选择，即在ReactJS应用程序中合并async/await。可以使用基于promise的HTTP客户端库，如axios。示例代码如下所示：

import axios from 'axios';
...
class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.onLogin = this.onLogin.bind(this);
        ...
    }
    async onLogin() {
        const { email, password } = this.state;
        try {
           const response = await axios.post('/login', { email, password });
           console.log(response);
        } catch (err) {
           ...
        }
    }
    ...
}

---

我认为这也是一种正常的方式。但是对不起，我不能用英语描述((

submitHandler=e=>{
e、 预防默认值（）
console.log（this.state）
取（'http://localhost:5000/questions',{
方法：“POST”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（this.state）
})。然后（响应=>{
console.log（响应）
})
.catch（错误=>{
console.log（错误）
})
}

这里有一个修改的util函数（堆栈上的另一个post），用于get和post.Make util.js文件

let cachedData = null;
let cachedPostData = null;

const postServiceData = (url, params) => {
    console.log('cache status' + cachedPostData );
    if (cachedPostData === null) {
        console.log('post-data: requesting data');
        return fetch(url, {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(params)
          })
        .then(response => {
            cachedPostData = response.json();
            return cachedPostData;
        });
    } else {
        console.log('post-data: returning cachedPostData data');
        return Promise.resolve(cachedPostData);
    }
}

const getServiceData = (url) => {
    console.log('cache status' + cachedData );
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(url, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export  { getServiceData, postServiceData };

在另一个组件中的用法如下

import { getServiceData, postServiceData } from './../Utils/Util';

constructor(props) {
    super(props)
    this.state = {
      datastore : []
    }
  }

componentDidMount = () => {  
    let posturl = 'yoururl'; 
    let getdataString = { name: "xys", date:"today"};  
    postServiceData(posturl, getdataString)
      .then(items => { 
        this.setState({ datastore: items }) 
      console.log(items);   
    });
  }

---

下面是在reactjs中定义和调用post API的简单方法。使用命令

npm Install axios

安装

axios

并调用

post-req

方法，它将返回包含100个元素的数组

// Define post_req() Method in authAction.js

import axios from 'axios';

const post_req = (data) => {
return new Promise((resolve, reject) => {
const url = 'https://jsonplaceholder.typicode.com/posts'
const header = {
    "Access-Control-Allow-Origin": "*",
    "Content-Type: application/json"
}
axios({
    method: 'post',
    url: url,
    data: data,
    headers: header
 });
 .then((res)=>{resolve(res);})
 .catch((err)=>{reject(err);})
 })
}

// Calling post_req() Method in react component 
import React, { Component } from 'react';
import { post_req } from 'path of file authAction.js'

class MyReactComponent extends Component {
constructor(props) {
super(props);
this.state = {
 myList:[]
 };
}
componentDidMount() {
let data = {
 .......
 } 
 this.props.post_req(data)
 .then((resp)=>{this.setState({myList:resp.data})})
 .catch((err)=>{console.log('here is my err',err)})
}
render() {
return (
  <div>
    ....
  </div)
 }
}
export default MyReactComponent;

//在authAction.js中定义post_req（）方法
从“axios”导入axios；
const post_req=（数据）=>{
返回新承诺（（解决、拒绝）=>{
常量url=https://jsonplaceholder.typicode.com/posts'
常数头={
“访问控制允许来源”：“*”，
“内容类型：应用程序/json”
}
axios({
方法：“post”，
url:url，
数据：数据，
标题：标题
});
.然后（（res）=>{resolve（res）；}）
.catch（（err）=>{reject（err）；}）
})
}
//在react组件中调用post_req（）方法
从“React”导入React，{Component}；
从“authAction.js文件路径”导入{post_req}
类MyReactComponent扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
myList:[]
};
}
componentDidMount（）{
让数据={
.......
} 
此.props.post_请求（数据）
.then（（resp）=>{this.setState（{myList:resp.data}）}）
.catch（（err）=>{console.log（'这是我的err'，err）}）
}
render（）{
返回(
....
非常感谢您提供的示例：）。我还想了解我的服务是否需要JSON格式的数据。那么需要做哪些更改？任何类型的信息都会非常有用。因此，当我使用curl命令访问端点时，它就像curl-v-X POST-d'{“Id”：“112”，“User”：“xyz”}'那么我如何调用这样的服务。创建一个名为data的变量，使用
'{“Id”：“112”，“User”：“xyz”}“
并将URL更改为localhost:8080/myapi/ui/start，也就是说，一旦XHR调用成功，您将在done方法中登录，并且您将可以通过result属性访问数据。您必须这样做。别忘了，
fetch（）
函数不返回数据，它只返回一个.haha@Divya，我正要在阅读你的之前发表同样的评论。不确定是否将其放在React.createClass中。另外，我们可以有一个React文档的链接吗？我试图搜索他们的网站（）未成功。我们可以修改原始答案以包含导入吗？IMO，@amann有一个。此答案意味着
fetch
内置于React中，而React中没有，并且没有指向引用文档的链接。
fetch
是（在撰写本文时）。对于浏览器兼容性，您需要。注意，这是来自React原生文档，而不是React JS文档，但您也可以在React JS中使用Fetch_API。对我来说，这是最好的答案，因为React没有内置任何内容。您可以导入
Fetch
或
superagent
或
jQuery
或
axios或其他不属于“香草反应”的内容，以便执行上面发布的内容以外的任何操作。看起来，如果您使用的是flask，它可以很好地执行
JSON.stringify（{“key”：“val”}）
，然后在flask端执行
request.get_JSON（）
是的，如果你发布的是JSON，你必须先将其字符串化。你能选择帮助你的答案吗？出于某种原因，nodejs会解释
await
-
语法错误：await是一个保留字（33:19）
@prayagupd你使用的是什么版本的node？
let cachedData = null;
let cachedPostData = null;

const postServiceData = (url, params) => {
    console.log('cache status' + cachedPostData );
    if (cachedPostData === null) {
        console.log('post-data: requesting data');
        return fetch(url, {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(params)
          })
        .then(response => {
            cachedPostData = response.json();
            return cachedPostData;
        });
    } else {
        console.log('post-data: returning cachedPostData data');
        return Promise.resolve(cachedPostData);
    }
}

const getServiceData = (url) => {
    console.log('cache status' + cachedData );
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(url, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export  { getServiceData, postServiceData };

import { getServiceData, postServiceData } from './../Utils/Util';

constructor(props) {
    super(props)
    this.state = {
      datastore : []
    }
  }

componentDidMount = () => {  
    let posturl = 'yoururl'; 
    let getdataString = { name: "xys", date:"today"};  
    postServiceData(posturl, getdataString)
      .then(items => { 
        this.setState({ datastore: items }) 
      console.log(items);   
    });
  }

// Define post_req() Method in authAction.js

import axios from 'axios';

const post_req = (data) => {
return new Promise((resolve, reject) => {
const url = 'https://jsonplaceholder.typicode.com/posts'
const header = {
    "Access-Control-Allow-Origin": "*",
    "Content-Type: application/json"
}
axios({
    method: 'post',
    url: url,
    data: data,
    headers: header
 });
 .then((res)=>{resolve(res);})
 .catch((err)=>{reject(err);})
 })
}

// Calling post_req() Method in react component 
import React, { Component } from 'react';
import { post_req } from 'path of file authAction.js'

class MyReactComponent extends Component {
constructor(props) {
super(props);
this.state = {
 myList:[]
 };
}
componentDidMount() {
let data = {
 .......
 } 
 this.props.post_req(data)
 .then((resp)=>{this.setState({myList:resp.data})})
 .catch((err)=>{console.log('here is my err',err)})
}
render() {
return (
  <div>
    ....
  </div)
 }
}
export default MyReactComponent;