Asynchronous long-running operation API call

Question

I have a function in my react app that sends data to my Django API. Once that data is received, django calls an external python function to execute some code.

Currently I have the javascript give me an alert when it receives an ok response. However, Django isn't sending this response until the external function completes; this is a problem because the external function can take up to an hour to run based on the user's input. Can this be changed to give one alert once the external python code begins to successfully run and a second time when the function is complete?

I understand their can be a failure when sending the data to the API, the API not being able to access the data possibly because of a mismatched data type, and finally if the data is incompatible with the external function. I am looking for 3 different responses from the async function React

export const SendData = (url, props) =>{ //this url is the url to the DataInput api view
    const data1 = document.getElementById('data1')
    const data2 = document.getElementById('data2')

    async function postData() {
        var res = ''
        const options ={
            method : 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
            data_one: data1,
            data_two: data2
            })
        }
        const response = await fetch(url, options)
            .then(response => {
                if (response.ok) {
                    alert("Data Sent!")
                }
                else {
                    alert("An error has occurred.\nWere all fields filled out?")
                }
            });
    }       
    postData()
};

models.py

class DataInput(models.Model):
    data_one = models.IntegerField(
        max_length=30,
        default=5)
    data_two = models.IntegerField(
        max_length=30,
        default=4)

class OtherData(models.Model):
    other_data = models.IntegerField(
        max_length=5,
        default=10)

@receiver(post_save, sender=DataInput, dispatch_uid="extra function")
def extra_function(sender, instance, created, *args, **kwargs):
    #dummy function to show reliance on data
    for i in OtherData[0].other_data:
        print(instance.data_two + instance.data_one)

serializer.py

from rest_framework import serializers
from .models import DataInput
from .models import OtherData
class DataSerializer(serilizers.ModelSerializer):
    class Meta:
        model = DataInput
        fields = ('data_one', 'data_two')
class OtherDataSerializer(serializer.ModelSerializer):
    class Meta:
        model = OtherData
        fields = ('other_data')

score 3 · Accepted Answer · answered Sep 17 '20 at 00:23

It's better to avoid synchronously waiting responses for long running operations in the same (http) connect. Especially in a browsers, because they could be a cause of timeouts (depending of a browsers but usually 1-5 minutes)

One of the solution it to use HTTP polling. Good explanation of this technique is available here:

As you can find in second link your API should validate both the request and the action to be performed before starting the long running process. If the request is invalid, reply immediately with an error code such as HTTP 400 (Bad Request). In other case give a task to background worker (for example django-q), response with a location which react app can poll awaiting job result.

Asynchronous long-running operation API call

1 Answers1