Hook into ajax and limit max concurrency for performance

[axetroy]

In some condition. I need send many many XMLHttpRequst(for example: stat github data in client side)

may be 100 or more request. it's ok in PC browser. but got bad performance in mobile browser.

so, I think, whether there is a lib, to hook into XMLHttpRequst, limit max concurrency.

For example:

Web component loaded and send 100+ http request in 3s.
The good way is splice the request, send 10 request with 10 times.

Not just simple like this: [[1,2,3...10],[1,2,3...10],...[1,2,3...10]]

Like a queue list, if previous request done. then put next request in to the queue
But make sure the max request number always equal 10

API

I think API should look like this:

XMLHttpRequest.setMax(10)

Is there have exist a lib implement this? or who can help?

[RangerMauve]

You should also consider using GraphQL so that you can get a bunch of data in one request

[axetroy]

@RangerMauve
Thanks for told me that. Actually, I wanna build a web app without server.
All data comes from 3th party API. like github api v3.

[RangerMauve]

@axetroy Yeah, github actually supports GraphQL already so you could look into that to see if you can restructure your app to be more efficient with requests

[axetroy]

@RangerMauve
That's so cool! resolved it, thanks.

But I still really hope there is a solutionin in client side.

[sindresorhus]

Use window.fetch with p-map. Polyfill for fetch here.

const pMap = require('p-map');

const sites = [
	'ava.li',
	'sindresorhus.com',
	'github.com',
	...
];

const mapper = url => fetch(url).then(response => response.json());

pMap(sites, mapper, {concurrency: 10}).then(result => {
	console.log(result);
});