Multiple AJAX WebAPI async calls reach controller method randomly delayed

Question

I have 3 async WebAPI which I call via JQuery AJAX at the same time when my MVC page is loaded. One, sometimes two or all of them are reaching the controller method very fast and sometimes one or two of them are delayed about 3 and 10 seconds. The execution of the work each async method is always extremely fast (a few milliseconds). The only solutions I've found is to disable session state (which makes no sense to me because it is disabled by default in WebAPI, I've tried it though but with no success) and that I should use async methods to be able to run all 3 requests from the same session in parallel which is what I am already doing.

I've also tried if it is something with IIS Express which I am using but IIS had the same effect. Also tried various browser but same issue.

I am really lost here, someone has a solution or and idea on what could possibly block my requests? Keep in mind the requests are blocked randomly and sometimes it's fine but mostly not and the delays of the other two requests are always 3 and 10 seconds.

my client side code (all 3 calls look like this):

            $.ajax({
                type: "GET",
                url: "/api/follow/getFollows/" + this.userId,
                contentType: "application/json",
                dataType: "json",
                processData: false,
                success: (data) => {
                    this.handleLoadedFollows($("#followsList"), data);
                },
                error: (data) => { alert("error"); }
            });

my async webAPI method looks like this (all 3 methods look like this):

    [HttpGet]
    [Route("getFollows/{userId}", Name = "Follow.GetFollows")]
    public async Task<IHttpActionResult> GetFollows(Guid userId)
    {
        var entries = await _followService.GetFollowsAsync(userId, null, 20);

        // create viewmodel
        var viewModel = await _followViewModelFactory.CreateUserViewModelAsync(entries.Results);
        return Ok(viewModel);
    }

Sounds to me like it may be network lag since it is relatively intermittent. Another thing to keep in mind, your ajax calls may fire in quick succession, but they do not fire at the same time. — Kevin, Apr 20 '16 at 20:17

Hypi · Accepted Answer · 2016-04-22T22:53:18.013

After checking the IIS logs I was sure that the browser is the bottleneck here. Firing several AJAX requests quickly after each other does not really work well. That's why I got these huge delays.

I solved it by using timeout mechanisms to make sure not all the requests are fired against the browser at once.

I am using typescript but here is my solution (probably not the best solution but it works)

I Created a handler which queues function calls and executes them with specified timeouts:

module Utilities {
    export class AjaxRequestHandler {
        private static ajaxQueue: Function[] = [];
        private static queueFunctionExecuted: boolean[] = [];

        static enqueueAjaxRequest(ajaxFunction: Function): void {
            this.ajaxQueue.push(ajaxFunction);
            this.queueFunctionExecuted.push(false);

            var interval = setInterval($.proxy(() => {
                if (this.ajaxQueue[0] === ajaxFunction && this.queueFunctionExecuted[0] === false && this.queueFunctionExecuted.length > 0) {
                    ajaxFunction();
                    this.queueFunctionExecuted[0] = true;

                    setTimeout($.proxy(() => {
                        this.ajaxQueue.shift();
                        this.queueFunctionExecuted.shift();
                    }, this), 100);
                }
            }, this, ajaxFunction)
                , 20);

            setTimeout($.proxy(() => {
                clearInterval(interval);
            }, interval), 10000);
        }
    }
}

and the queueing of the functions is like this:

        Utilities.AjaxRequestHandler.enqueueAjaxRequest($.proxy(this.getFollowedBy, this));
        Utilities.AjaxRequestHandler.enqueueAjaxRequest($.proxy(this.getFollows, this));
        Utilities.AjaxRequestHandler.enqueueAjaxRequest($.proxy(this.getSingleFollows, this));

hope this helps someone with the same issue

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

first take a look at this: How to perform Ajax requests, a few at a time

and then also, https://forums.iis.net/t/1164347.aspx?Maximum+number+of+http+requests+on+IIS+with+Windows+7

edited May 23 '17 at 11:59

Community

1
1

answered Apr 21 '16 at 05:28

dee zg

13,793
10
42
82

Multiple AJAX WebAPI async calls reach controller method randomly delayed

2 Answers2