问异步长时间运行操作API调用

EN

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

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)

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