react + flask web应用开发-前后端交互

react发送请求到后台flask

书接上回react + flask web应用开发-react前端

axios

安装axios

在react项目中执行
npm i axios

axios常用发送请求的方式

axios({
    method:"POST",  // 若不设置，默认为GET请求
    url:'/user/12345',
    //当`url`是相对地址的时候，设置`baseURL`自动添加在url之前会非常方便
    baseURL:'https://some-domain.com/api/',
    //`headers`选项是需要被发送的自定义请求头信息
    headers: {'X-Requested-With':'XMLHttpRequest'},
    //`params`选项是要随请求一起发送的请求参数----一般链接在URL后面
    //他的类型必须是一个纯对象或者是URLSearchParams对象
    params: {
      ID:12345
    },
    //`data`选项是作为一个请求体而需要被发送的数据
    //该选项只适用于方法：`put/post/patch`
    data:{
        firstName:"Fred",
        lastName:"Flintstone"
    },
    //`timeout`选项定义了请求发出的延迟毫秒数
    //如果请求花费的时间超过延迟的时间，那么请求会被终止
    timeout:1000,
    //`withCredentails`选项表明了是否是跨域请求,默认是false
    withCredentials:false,//default,
    //返回数据的格式
    //其可选项是arraybuffer,blob,document,json,text,stream
    responseType:'json',//default
});

常用简写：

axios.request(config);

axios.get(url[,config]);

axios.delete(url[,config]);

axios.head(url[,config]);

axios.post(url[,data[,config]]);

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

POST请求示例

axios.post('/str_test',data).then(response => {
  console.log(response.data);
}).catch(err => {
  console.log(err);
});

使用axios发送请求

代码修改

react部分：
新增文件ButtonEvent.js 用来进行axios示例
文件内容如下

import React from 'react';
import axios from 'axios';

class ButtonEvent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isToggleOn: true,
        str: 'str test'
      };
  
      this.handleClick = this.Click.bind(this);
    }
  
    Click(){
      this.setState({
        isToggleOn: false,
      });
      const data = {string: this.state.str}
      console.log(data);
      axios.post('/str_test', data).then(response => {
        console.log(response.data);
        this.setState({
            str: response.data['string']
        });
      }).catch(err => {
        console.log(err);
      });
      this.setState({
        isToggleOn: true,
      });
    }
  
    render() {
      return(
        <div>
          <h1>
          <button disabled={!this.state.isToggleOn} onClick={this.handleClick.bind(this, this.state.str)}>
            get_info
          </button>
          </h1>
          <h1>{this.state.str}</h1>
        </div>
      )
    }
}

export default ButtonEvent;

在App.js中添加ButtonEvent组件

...
<ButtonEvent />
...

flask部分：
修改index.py文件，增加接口函数

...
from flask import Flask, render_template, request, jsonify
...
@app.route('/str_test', methods=['POST'])
def str_test():
    str = request.json.get('string').strip()
    str = str + ' test'
    return jsonify({"string": str})
...

编译运行

react 部分文件修改完成后，执行npm run build 进行编译，然后将buikd目录下的代码同步到后端项目中。
具体可以参照之前的文章 react + flask web应用开发-前后端结合 进行代码更新。

运行效果