Could it be feasible to manage several ongoing asynchronous requests simultaneously?

Question

Could it be feasible to manage several ongoing asynchronous requests simultaneously?

Visualize a grid in which the user completes cell A1 and presses Enter to move to A2. As this happens, a request is sent to the backend to search a database and retrieve results for populating the remaining cells in row A. Meanwhile, I want the user to continue typing in cells A2, A3, and so on.
Now, the questions are:

Is it possible to have multiple ongoing asynchronous requests firing sequentially without one cancelling out the previous one before its results are achieved?
The database being accessed is a corporate data warehouse known for being slow. Is there a maximum duration that an async request can remain "open"? Will browsers time out?
If I send out async requests #1, #2, and #3, but they are received in the order of #2, #3, #1 - what implications does this have?

Thank you.

javascript asynchronous

Answer 1

Answer №1

Addressing your inquiries one by one:

Absolutely, it is possible to have multiple HTTP requests concurrently. Take the scenario of loading a webpage for instance. Numerous requests are made to different sources simultaneously. As these requests are fulfilled, the corresponding callback functions update the content on the page.
Indeed, they will. A request will inevitably time out after a certain period. Each browser has its own predefined duration for keeping a request open. Once this time limit is reached, the request is terminated.
The sequence in which the requests are resolved does not matter. You'll be utilizing a callback-based approach to handle the HTTP response. Each callback function pertains to a specific request and should manage itself accordingly.

Answer 2

Addressing your inquiries one by one:

Absolutely, it is possible to have multiple HTTP requests concurrently. Take the scenario of loading a webpage for instance. Numerous requests are made to different sources simultaneously. As these requests are fulfilled, the corresponding callback functions update the content on the page.
Indeed, they will. A request will inevitably time out after a certain period. Each browser has its own predefined duration for keeping a request open. Once this time limit is reached, the request is terminated.
The sequence in which the requests are resolved does not matter. You'll be utilizing a callback-based approach to handle the HTTP response. Each callback function pertains to a specific request and should manage itself accordingly.

Answer 3

Answer №2

Is it possible to have multiple asynchronous requests firing sequentially even before the results of previous requests are resolved?

Indeed.

Does each subsequent async request cancel out the preceding one?

No, they do not.

The database I'm accessing is a corporate data warehouse, which might be very slow. Is there a limit to how long an async request can remain "open"? Do browsers eventually time out?

Yes, async requests will ultimately time out. (However, assuming a corporate data warehouse's database is inherently sluggish may not be accurate.)

Suppose I send out async requests #1, #2, and #3, but receive responses in the order #2, #3, #1 - does this have any consequences?

Most APIs like XMLHttpRequest, fetch, etc., handle completion callbacks based on when operations complete, not necessarily in the order they started. This discrepancy could indeed lead to issues if your code isn't prepared for it.

For instance, this snippet on jsFiddle demonstrates three concurrent asynchronous requests completing in different orders:

function doRequest(reqnum, reqdata) {
    const delay = (1000 + Math.floor(Math.random() * 3000)) / 1000;
    const json = JSON.stringify({data: reqdata});
    return fetch("/echo/json/", {
        method: "POST",
        body: `delay=${delay}&json=${encodeURIComponent(json)}`
    })
    .then(res => {
        if (!res.ok) {
            throw new Error("HTTP status " + res.status);
        }
        return res.json();
    })
    .then(data => {
        console.log(`${reqnum} complete, data = ${data.data}`);
    });
}

doRequest(1, "one");
doRequest(2, "two");
doRequest(3, "three");

Live Example

Answer 4

Is it possible to have multiple asynchronous requests firing sequentially even before the results of previous requests are resolved?

Indeed.

Does each subsequent async request cancel out the preceding one?

No, they do not.

The database I'm accessing is a corporate data warehouse, which might be very slow. Is there a limit to how long an async request can remain "open"? Do browsers eventually time out?

Yes, async requests will ultimately time out. (However, assuming a corporate data warehouse's database is inherently sluggish may not be accurate.)

Suppose I send out async requests #1, #2, and #3, but receive responses in the order #2, #3, #1 - does this have any consequences?

Most APIs like XMLHttpRequest, fetch, etc., handle completion callbacks based on when operations complete, not necessarily in the order they started. This discrepancy could indeed lead to issues if your code isn't prepared for it.

For instance, this snippet on jsFiddle demonstrates three concurrent asynchronous requests completing in different orders:

function doRequest(reqnum, reqdata) {
    const delay = (1000 + Math.floor(Math.random() * 3000)) / 1000;
    const json = JSON.stringify({data: reqdata});
    return fetch("/echo/json/", {
        method: "POST",
        body: `delay=${delay}&json=${encodeURIComponent(json)}`
    })
    .then(res => {
        if (!res.ok) {
            throw new Error("HTTP status " + res.status);
        }
        return res.json();
    })
    .then(data => {
        console.log(`${reqnum} complete, data = ${data.data}`);
    });
}

doRequest(1, "one");
doRequest(2, "two");
doRequest(3, "three");

Live Example

Answer 5

Answer №3

Avoid the misconception that JavaScript is always single-threaded – multiple outstanding async requests are possible. This scenario often arises when implementing sleep functions.

function snooze(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Put the snooze function to the test by calling it multiple times before the initial request resolves. Remember to declare your functions as async.

Take caution against the hangover error. Initiating a function more than once will not cancel the previous request. To see this concept in action, check out this working example: https://codepen.io/anon/pen/Jmpcq/?editors=101

An eventual timeout is bound to happen.

Answer 6

Avoid the misconception that JavaScript is always single-threaded – multiple outstanding async requests are possible. This scenario often arises when implementing sleep functions.

function snooze(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Put the snooze function to the test by calling it multiple times before the initial request resolves. Remember to declare your functions as async.

Take caution against the hangover error. Initiating a function more than once will not cancel the previous request. To see this concept in action, check out this working example: https://codepen.io/anon/pen/Jmpcq/?editors=101

An eventual timeout is bound to happen.

Could it be feasible to manage several ongoing asynchronous requests simultaneously?

Answer №1

Answer №2

Answer №3

Similar questions

When trying to access the same path, useEffect does not trigger

How to send arrays through JSON?

What is the best way to inquire (or conduct a Google search) on combining objects from various database models?

A guide on extracting JSON data from a script tag using Cheerio

Counting the number of PHP inputs in a field

Speedily deliver a message to the designated destination

Need help implementing the disableGutters property on MTableToolbar?

Show pagination control only when there are multiple pages in AngularJS using ui-bootstrap

Having trouble with React Page crashing when trying to access the component state

Acquire the value of ant-design Select dropdown upon hover

Why would triggering an input event have any effect if it doesn't appear to be utilized anywhere?

JavaScript button with an event listener to enable sorting functionality

Creating dynamic images in JavaScript by assigning URL paths from string variables

What could be causing this Angular controller to throw the error message "Error: Unknown provider: nProvider <- n"?

Issue: Unable to locate element with the specified selector: #email

Ways to display output on a single line using javascript

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

Activate the feature of smooth shading using Three.js

AngularJS Large file size

Implementing JavaScript to Retrieve and Insert Full HTML Tags into a Textarea