Multiple request for 1 endpoint block request to other endpoints - reactjs

I need to upload multiple pdf’s to an endpoint.
Currently I am bombarding api with 1 pdf per 1 request (using devextreme-react file uploader)
It works fine for 3-5 request but more than that queues them into pending.
The problem is that I also still need an api to handle other endpoints.
Maybe something like telling the browser “use up to 3 parallel requests for this endpoint and leave the rest pending but when I request other endpoints then handle them immidiately”.
How to do that?
My stack is React with Next, axios for request, Django Rest Framework on Back end.

Related

Axios taking long time to fetch response

I am using Axios instance in a React app to fetch data from GET requests. Backend server is deployed on Heroku(Professional Dyno) and written in Django REST framework. Database is deployed on AWS.
On postman, APIs are giving response in around 2-3 seconds:
Postman Screenshot
But in the react app, response time is around 25-30 seconds.
React app response time Screenshot
Please note that I am calling around 10 different APIs in a single page. Is this affecting the response times?
The problem is, your request got blocked for 18 seconds. When you are executing multiple heavy requests, it's definitely possible that this requests takes some time to be even executed. If you want to check whether this is the reason for it, you could just comment out the other requests an examine what happens.
An interesting request on what blocked means can be found here.

Axios API call speed less than Postman's

I have API call and it is taking 0.5 seconds in postman whereas the same API call taking 10 seconds with axios. How should I increase this speed?
Actually, in the browser, you make 2 requests, unlike Postman. One is OPTIONS for check CORS and one is GET, POST, etc. Your API server returns a header when OPTIONS request which is Access-Control-Max-Age. Access-Control-Max-Age value stands for how long wait for the next OPTIONS request. May your API was not set an Access-Control-Max-Age header or set for too short therefore your browser always makes 2 requests. Needs to be more investigation here to be sure.
There is no other way for improve speed with Axios because postman is s/w and axios is package lib with different functionality and using your application to run it while postman run api directly thats why its faster than axios.
The Postman isn't a browser so it will not worry about CORS and can send the POST without sending the OPTIONS, so only incurs the cost of the POST.
and your sever may take time to process the OPTIONS request and then the POST request so whether you are using axios or fetch even XHRHttpRequest it will take more time than postman

URLs are proxied by react-scripts only when they are called via curl or axios

I found an interesting case in one of the react-scripts apps where the proxy is configured to localhost:3001 (the front end is running on localhost:3000).
From the react stuff we make a request via axios to localhost:3000/api/results and that loads a bunch of JSON information, but if I open localhost:3000/api/results in a new browser tab that does not display the JSON but loads the HTML instead.
Why is that happening?
The real problem is that we have endpoint to download files from, like:localhost:3001/api/downloads/csv/file.csv, but they won't work, because when localhost:3000/api/downloads/csv/file.csv is not proxied to localhost:3001/api/downloads/csv/file.csv and we simply cannot call this via axios because it should be a direct call from the browser.
However, the strange thing is why does it work via axios and curl?
By doing curl localhost:3000/api/downloads/csv/file.csv (or 3001), we get the right content back.
If you are using react-scripts, then this is facilitated by Service Workers. Quoting from Service Workers - By Ankita Masand...
Service Worker acts as a proxy server that intercepts the network requests sent by your web application to the server. In the sense, requests to fetch Javascript or CSS files, images go through service worker to the server. Service Worker has the ability to modify this request or send a custom response back to the client.
Here, Service Workers are acting as a Client Side Proxy and tapping to your HTTP Requests and you get the right content back.

Send large POST request from Google App Engine

I have to send a large POST request as part of a RESTful API call. The payload is around 80MB in size. When I try to send this in GAE Java, I get an exception saying it is not a permissible size because it is too large. What are the most common ways people send such large POST request? In my case, this request only happens very rarely, maybe once in 6 months or so. Nonetheless, I would need to have this feature.
From the docs - https://cloud.google.com/appengine/docs/quotas#Requests
The amount of data received by the application from requests. Each incoming HTTP request can be no larger than 32MB.
This includes:
data received by the application in secure requests and non-secure requests
uploads to the Blobstore
data received in response to HTTP requests by the URL fetch service
So write it to GCS or S3 or google sheets, docs etc... (anywhere that allows you to store a larger payload, then process this via a task queue.

How to initiate multiple HTTP requests asynchronously?

I'd like to start multiple HTTP requests rapidly after each other, without having to wait on the previous response to arrive. I've tried this using WebClient.UploadStringAsync, but this doesn't work. I'd like to efficiently implement the following scenario:
Send request 1
Send request 2
Send request 3
And in another thread:
Receive response 1
Receive response 2
Receive response 3
Can this be done in Silverlight?
I'd like to start multiple HTTP requests rapidly after each other, without having to wait on the previous response to arrive
That's called HTTP Pipelining (assuming you hope to use the same socket) and it's not supported by many proxies and gateway devices. I would be surprised if Silverlight tried to support it.
Yes it can be done. What leads you to believe that UploadStringAsync isn't working?
Here is my guess you are posting to ASP.NET with Sessions turned on (the default) right?
The requests will be queued at the server end because ASP.NET will only process one request for a specific Session at a time.

Resources