如何从 ReactJS 代码进行休息发送调用？

我是 ReactJS 和 UI 的新手，我想知道如何从 ReactJS 代码进行一个简单的基于 REST 的 POST 调用。

如果有任何例子出现，这将是非常有帮助的。

274765 次浏览
小开

这里有一个例子: https://jsfiddle.net/69z2wepo/9888/

$.ajax({
type: 'POST',
url: '/some/url',
data: data
})
.done(function(result) {
this.clearForm();
this.setState({result:result});
}.bind(this)
.fail(function(jqXhr) {
console.log('failed to register');
});

它使用的是 jquery.ajax方法，但是您可以很容易地用基于 AJAX 的库(如 axios、 superagent 或 get)来替换它。

小开

来自 本地文件的报道:

fetch('https://mywebsite.example/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})

(这是发布 JSON，但是您也可以这样做，例如，multipart-form。)

如果没有使用反应本机，也请参阅 常见问题的文档。

小开

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

在现代浏览器中，你也可以使用 fetch。

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

小开

这里 是基于特性和支持的 Ajax 库比较列表。 我倾向于只在客户端开发中使用 捡回来，或者在客户端和服务器端开发中使用 同构提取法同构提取法。

了解更多关于 同构提取与提取的信息

小开

你可以安装超级代理

npm install superagent --save

然后对服务器进行邮件呼叫

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 install axios --save

基于简单承诺的请求

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
小开

到2018年及以后，您有了一个更现代的选项，即在 ReactJS 应用程序中合并异步/等待。可以使用基于承诺的 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.preventDefault()
console.log(this.state)
fetch('http://localhost:5000/questions',{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(this.state)
}).then(response => {
console.log(response)
})
.catch(error =>{
console.log(error)
})
    

}

Https://googlechrome.github.io/samples/fetch-api/fetch-post.html

获取(‘ url/questions’，{ 方法: 标题: { 接受: ‘ application/json’, ‘ Content-Type’: ‘ application/json’, }, Body: JSON.stringify (this. state) }) ，然后(回应 = > { Log (响应) }) . catch (error = > { Log (错误) })

小开

下面是一个修改过的 util 函数(另一个栈上的帖子) ，用于同时获取和发布。

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

Here is the simple method to define and call post APIs in reactjs. Install axios using command npm install axios and call post req method wherever you want, it will return array that contains 100 elements.

// 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;
小开

从“反应”导入“反应”，{ useState } ; 从‘ Axios’导入 Axios;

导出默认函数 Formlp () {

const url ="";


const [state, setstate] = useState({
name:"",
iduser:""
})


function handel(e){


const newdata={...state}
newdata[e.target.id]=e.target.value
setstate(newdata);
}


function submit(e)
{
e.preventDefault();


//  Axios.post(url,{name:state.name,iduser:state.iduser}).then( res=>{console.log(res)});


console.log(state)


}

报税表( < div onSubmit = {(e) = > mit (e)} > < input onChange = {(e) = > handel (e)} id = “ name”value = { state.name } placeholder = “ name”type = “ text”> < input onChange = {(e) = > handel (e)} id = “ iduser”value = { state.iduser } placeholder = “ iduser”type = “ text”> 

        <button>submit</button>
</form>
</div>

); }

小开

下面是 v18 + 在处理表单数据和使用数据创建 POST 请求时的一个快速示例。

async function handleOrderSubmit(event){
event.preventDefault()


try{
const formData= {name: event.target.name.value, email: event.target.email.value, message: event.target.name.message}
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
};
const response = await fetch('https://www.example.com/form', requestOptions);
const data = await response.json();
navigate("/form-response", { state: {data: data, status: true} })
}
catch(error){
navigate("/form-response", { state: {status: false} })
}
}

注1: 在“/form-response”页面上使用 status，您可以自定义显示给用户的内容。对于 true，可以显示不同的部分，对于 false，可以显示不同的部分。

注2: 如果状态成功，您也可以访问下一页上的数据，并根据用户信息对其进行定制。

注3: event.preventDefault()对于避免重新加载页面非常重要。


提交答案