Is the functionality of `Promise.all` affected by the browser's restriction on concurrent connections?

Suppose an api server is utilizing HTTP/1.1 and the browser has a maximum of 6 concurrent TCP connections per domain. If I make 7 api calls simultaneously using Promise.all, does that mean the last api call will have to wait for the response from the first api call to return over the network?

Promise.all([api(), api(), api(), api(), api(), api(), api()]) // 7 api calls

Furthermore, does HTTP/2 address this issue with multiplexing, allowing all API calls to be made on the same connection so they won't need to wait for each other?

javascripthttphttp2

Answer №1

Is it true that if I make 7 API calls simultaneously using Promise.all, the last API call will have to wait for the response of the first API call to come back over the network?

Affirmative.

When you use Promise.all([api(), api(), ...]), all the api() function calls will be executed immediately. This means that the first 6 requests will be sent out, and the 7th request will be queued until one of the first 6 is completed, at which point the browser will send out the 7th request.

This behavior is not specific to Promise.all(). The same sequence would occur even with this code:

const promises = [api(), api(), api(), api(), api(), api(), api()];

Just with that snippet, the 7th HTTP request wouldn't be dispatched to the host until one of the first 6 had finished. This delay happens due to the browser's restrictions on connections to the same host.

As a side note, Promise.all() will still function properly, and all the API requests will still be processed, albeit with a slight delay as they wait for connection limits to be lifted.

Answer №2

A limitation that affects Promise.all is how the arguments are evaluated before being passed to a function.

anotherFn([fn(), fn(), fn()])

Essentially translates to:

const r1 = fn();
const r2 = fn();
const r3 = fn();
anotherFn([r1, r2, r3]);

The evaluation of each argument happens first, including any API calls, which means Promise.all or anotherFn have no control over it since it occurs before the function execution.

Does this mean the last API request has to wait for the first one to return?

If there's a browser limitation of 6 connections per domain to an API, then yes.

However, technologies like HTTP/2 alleviate this issue by allowing multiple requests over a single connection, avoiding the browser's connection limit.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging D3.js in combination with Total.js and node.js

I have been attempting to utilize total.js in conjunction with D3 for creating a tree visualization. However, I am encountering issues when trying to download D3. This is what I do: npm install D3 Upon running the above command, I receive the following e ...

javascriptnode.jsd3.jscontextifytotal.js

Tips for Avoiding Inheritance of a Specific Method

Let's say we have two classes, A and B. Class B extends class A, inheriting all of its methods. It is also possible to override these inherited methods. The question at hand is whether it is possible to prevent class B from inheriting a specific metho ...

javascriptinheritanceecmascript-6

I am unable to utilize third-party components within my Nuxt.js/vue.js project

I am attempting to use a library for my Nuxt project, following the guidelines laid out in the documentation available here: getting-started Despite following the instructions provided, I keep encountering errors such as "Unknown custom element: - did you ...

javascriptvue.jsnuxt.js

Vue.js methods bound as properties on a parent object

There are times when I come across scenarios where it would be convenient to bind methods as an object property rather than a direct Vue method. For instance, instead of: <MyInput :formatter="currencyFormat" :parser="currencyParser& ...

javascriptvue.js

extract individual components from the google books api

It has been quite a while since I last dabbled in JavaScript, so I decided to embark on a project creating a "bookcase" to organize the books I have read and those I still want to read. One challenge I encountered was figuring out how to separate the eleme ...

javascripthtmlcssapigoogle-books

Looping the Connection between Socket.io and Node

I have encountered a problem with my Unity client connecting to my node server using socket.io. While the initial connection is successful and acknowledged, when I try to emit a message to the connected client, the connection seems to get reopened as if a ...

javascriptnode.jsunity-game-enginesocket.io

Trouble with document updates in MongoDB/Mongoose causing a delay?

I am currently working on updating an object nested in an array in my application. When I test this functionality using Postman, I am experiencing a delay that requires me to make two requests in order to see the updated value. if (taskStatus) { cons ...

javascriptnode.jsmongodbexpressmongoose

When the LI element is clicked, it triggers the display of another LI element without affecting the rest of the

New to the web development scene and trying to figure out how to create a collapsible text feature using HTML, JavaScript, and JQuery. I've got the styling down but struggling with the scripting part. Here's an example of what I'm trying to ...

javascriptjquerycsshtml

JavaScript: Incorporating an operator into a specific object (instead of the entire class)

Are you familiar with how to include an operator in an object (rather than the entire class)? When it comes to a method, I know you can achieve that by: my_object.new_function = function(){return 1}; Then invoking my_object.new_function() will output ...

javascript

Multiple onClick events being triggered unexpectedly upon component re-render

My react component is a form that triggers a function to handle data saving and other tasks when the send/submit button is clicked. The issue arises when the component seems to re-render multiple times after the button click, most likely due to updated ex ...

javascriptreactjs

Using jQuery to reference my custom attribute---"How to Use jQuery to reference My

Can you explain how to reference a tag using a custom attribute in jQuery? For example, if I have a tag like this: <a user="kasun" href="#" id="id1">Show More...</a> I want to reference the tag without using the id. So instead of using: $( ...

javascriptjqueryhtmljquery-selectors

The issue with executing event.keyCode == 13 in Firefox remains unresolved

I've implemented a function that sends comments only when the "enter" key is pressed, but not when it's combined with the "shift" key: $(msg).keypress(function (e) { if (event.keyCode == 13 && event.shiftKey) { event.stopProp ...

javascriptjqueryevents

Instructions on removing an HTML element from a div that has the attribute contentEditable

Here is an example of HTML code: <div id="editable" contentEditable="true"> <span contentEditable="false">Text to remove</span> </div> I want to be able to delete the entire span element (along with its text) with just one bac ...

javascripthtmlfbjs

Can you explain the significance of the res.render callback parameter in Express 4.0 for Node.js?

Can you explain the role of the res.render callback argument? When would it be necessary to use this callback argument, especially when there is already a template specified as the first argument? The following code snippet is taken from the official doc ...

javascriptnode.jsexpresspug

I'm struggling to comprehend the purpose of this function. [From the Codecademy Contact List exercise]

Within the "for var x in friends" loop, the program aims to search each key within the friends object, such as bill and steve. Subsequently, with the condition "friends[x].firstName === name", the check is made if the first name matches the provided inpu ...

javascriptfunction

Error: Attempting to assign a value to the 'firstData' property of an object that is undefined

I am encountering two identical errors in my service. Below are the details of my service and controller: Service code snippet: getData: function (dataRecievedCallback, schemeid, userid) { //Average JSON api averageData = functi ...

javascripthtmlangularjsexpression

Is there a way to substitute the final character in the specific regex I've selected?

I have a specific string that I need to modify from {Rotation:[45f,90f],lvl:10s} to {Rotation:[45,90],lvl:10}. Here is the code I tried: const bar = `{Rotation:[45f,90f],lvl:10s}` const regex = /(\d)\w+/g console.log(bar.replace(regex, '$&a ...

javascriptregexregex-group

Node.js setInterval is a method used to repeatedly execute a function

I have a code snippet for an http request that is supposed to run every one minute. However, I am encountering an issue with the following error: "Error: listen EADDRINUSE". Here is my current code: var express = require("express"); var app = express(); v ...

javascriptnode.jssetinterval

Angular Component - Array missing initial value in @Input property

Having trouble transferring values between components? I'm currently dealing with a situation involving two components: report-form and comment-form. The report form contains an array of comments, displaying a list of comments and a button for each on ...

javascriptangulartypescript

Issue: The function _lib_getAllUsers__WEBPACK_IMPORTED_MODULE_2___default(...) is not recognized as a valid function

I'm currently following the YouTube series on Next.js by Dave Gray. My goal is to import a function from the file "lib/getAllUsers" https://i.sstatic.net/1SQMg.png However, I'm encountering the following error: Unhandled Runtime Error Error: ...

javascripthtmlreactjswebnext.js