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

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

如果有任何例子，那将非常有帮助

直接来自React Native文档：

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

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

如果不使用React Native，请参阅ReactJS AJAX常见问题解答文档。

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(…)

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

安装：npm install axios --save

基于简单承诺的请求

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

您可以安装超级代理

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

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.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

fetch（'url/questions'{方法："POST"，标头：{接受："application/json"，"内容类型"："application/json"，}，body:JSON.stringfy（this.state）}).然后（响应=>{console.log（响应）}).catch（错误=>{console.log（错误）})

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

有关同构提取与提取的更多信息

这里有一个修改过的util函数（栈上的另一个post），用于get和post。制作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中定义和调用postAPI的简单方法。使用命令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;

import React，{useState}from"反应"；从"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）=>submit（e）}><input-onChange＝{（e）＝>handel（e）}id＝"；name"；value＝{state.name}占位符＝"；name"；type＝"；文本"><input-onChange＝{（e）＝>handel（e）}id＝"；iduser"；value＝{state.iduser}占位符＝"；iduser"；type＝"；文本">

        <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()对于避免页面重新加载非常重要。

下面是一个示例：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或fetch。

相关内容

最新更新

热门标签：