Как связаться с сервером flask (бэкэнд), чтобы отправить ему информацию из собственного внешнего интерфейса?

Question

Я разрабатываю приложение с внутренним интерфейсом React и внутренним интерфейсом flask. Мне удалось получить информацию с сервера flask через локальный URL-адрес, но я не знаю , как общаться в другом направлении и отправлять информацию на flask сервер . Мне нужно связаться с серверной частью и отправить информацию, которую пользователь предоставит приложению. Я работаю с эмулятором android (Android Studio).

Что делал:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const serverUrl = "http://10.0.2.2:5000/data"

class Test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            information: null,
        };
    }

    componentDidMount() {
        fetch(serverUrl)
            .then((response) => response.json())
            .then((data) => {
                console.log(data);
                this.setState({
                    information: data.data,
                })
            })
            .catch((error) => console.log(error))   
    }
    
    render() {
        return (
            <View style={styles.container}>
                <Text>{this.state.information}</Text>
            </View>
            
        )
    }
}
...

и

from flask import Flask

app = Flask(__name__)

@app.route('/data')
def get_data():
    return {"data": "monument"}

if __name__ == '__main__':
    app.run(debug=True)

Answer 1

Спасибо, Сахит Курапати, за ваш ответ.

Я сделал это вот так. Но у меня возникла ошибка на странице URL http://localhost:5000/send.

Внутренняя ошибка сервера: сервер обнаружил внутреннюю ошибку и не смог выполнить ваш запрос. Либо сервер перегружен, либо в приложении есть ошибка.

Вот код flask:

from flask import Flask, request

app = Flask(__name__)

@app.route('/data')
def send_data():
    return {"data": "monument"}

@app.route('/send', methods=['POST', 'GET'])
def get_data():
    if request.method == 'POST':
        return "Data received in server successfully!"

if __name__ == '__main__':
    app.debug = True
    app.run()

А вот собственный код реакции:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const serverUrl = "http://10.0.2.2:5000/data"

class Test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            information: null,
        };
    }

    _sendData() {
        fetch("http://10.0.2.2:5000/send", {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: "John Doe",
                password: "john123"
            })
        })
            .then((response) => { 
                console.log(response);
                console.log("ok");
            //do something here with the response from the flask server
            });
    }

    componentDidMount() {
        fetch(serverUrl)
            .then((response) => response.json())
            .then((data) => {
                console.log(data);
                this.setState({
                    information: data.data,
                });
                this._sendData();
            })
            .catch((error) => console.log(error))   
    }
    
    render() {
        return (
            <View style={styles.container}>
                <Text>{this.state.information}</Text>
            </View>
            
        )
    }
}
...

Answer 2

Решил проблему:

req = {}

@app.route('/send', methods=['GET', 'POST'])
def get_data():
    global req
    if request.method == 'POST':
        req = request.get_json()
        print(req)
        return req
    else:
        return "Data received in server"

Answer 3

Вы можете сделать это с помощью функции выборки, изменив ее следующим образом:

fetch("http://10.0.2.2:5000/send", {
  method: "post",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },

  //make sure to serialize your JSON body
  body: JSON.stringify({
    name: "John Doe",
    password: "john123"
  })
})
.then((response) => { 
    console.log(response);
   //do something here with the response from the flask server
});

Вы также должны добавить еще один маршрут с методом обработки этого запроса в Flask. Вы можете сделать это так:

@app.route('/send', methods=['POST']) #GET requests will be blocked
def send():        # you can do something here with the data sent
    return "Data received in server successfully!"

Вот статья , которая предоставляет дополнительную информацию об обработке почтовых запросов в Flask.

Надеюсь, это поможет :)