Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

"What is the method to execute two asynchronous calls in parallel with jQuery/FastAPI without any dependency on each other?"

As an application developer using FastAPI in Python and jQuery, I have created a chat application where a user inputs a question into the form, and a response is returned from the server. However, I need to send the user's message to a separate process that may take a long time (e.g., querying a database). I'm struggling to get the application to work in a way that does not require the user to wait for the separate process to complete. I've attempted various Promise and await variations, but with no success. The issue is exemplified in the code provided, where the user must wait the full 10 seconds for the sidetrack function to complete before displaying the message returned from submitmessage. My objective is to display the message from submitmessage immediately and handle the response from sidetrack separately, whenever it completes, without holding up the program.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can use Background Tasks in FastAPI to handle long-running processes without holding up the program. FastAPI provides a way to run background tasks that can be used to perform tasks outside of the request-response cycle. The background task runs in a separate process and does not block the main thread. You can use the BackgroundTasks class to create a background task. Here is an example of how you can use it: 
from fastapi import BackgroundTasks, FastAPI

app = FastAPI()

def side_track():
    # long running process
    time.sleep(10)
    print("Side track completed")

@app.post("/submit_message")
async def submit_message(message: str, background_tasks: BackgroundTasks):
    background_tasks.add_task(side_track)
    return {"message": f"Message received: {message}"}
In this example, the submit_message function returns immediately after adding the side_track function as a background task using the add_task method of the BackgroundTasks class. The side_track function runs in a separate process and does not block the main thread. You can find more information about Background Tasks in FastAPI in their official documentation.

Sources

Background Tasks - FastAPI - tiangoloAsynchronous Tasks with FastAPI and Celery | TestDriven.io5 Tips to Optimize Your API’s Performance - LoadNinjapython - How to do multiprocessing in FastAPI - Stack OverflowHow to get progress of long running API call? : r/FastAPI - Reddit
avatar
Tolerim
a month ago
To achieve this, you can start the side_track function as a separate task using Promise and async/await. Here's an updated version of the JavaScript code that handles the form submission: 
$(document).ready(function () {
    $('#message-form').submit(async function (event) {
        event.preventDefault();

        const input_message = $('#message-form input[name=message]').val()

        $('#message-list').append('<li><strong>' + input_message + '</strong></li>');

        // Start side_track function as a separate task
        const sideTrackPromise = side_track(input_message);

        const response = await fetch('/submit_message', {
            method: 'POST',
            body: JSON.stringify({ message: input_message }),
            headers: { 'Content-Type': 'application/json' },
        });

        // Reset the message input field
        $('#message-form')[0].reset();

        const newMessage = document.createElement('li');
        $('#message-list').append(newMessage);
        newMessage.innerHTML += response

        // Handle side_track response when it completes
        sideTrackPromise.then(result => {
            alert('Received response from side_track');
        }).catch(error => {
            alert('Error in side_track: ' + error);
        });
    });
});

async function side_track(question) {
    const response = await fetch('/side_track', {
        method: 'POST',
        body: JSON.stringify({ message: question }),
        headers: { 'Content-Type': 'application/json' },
    });
    return response.json();
}
Here, we use async/await to call the side_track function and get its response. We also create a Promise object for the side_track function using const sideTrackPromise = side_track(input_message); so that we can handle its response separately in the future. Then we make the request to submit_message and display its response immediately. After that, we attach a then callback to the sideTrackPromise object, which is executed when the side_track function completes. The catch callback in the sideTrackPromise object is executed if there is an error in the side_track function.
;