Web API async method with AngularJS

Question

I'm new to using AngularJS with MVC 5 and I've been looking at using Web API with AngularJS since it seems like a good solution for loading data into your client side models.

However I've noticed that quite a few guides use async actions that returns Task<Model> and I don't understand what benefit this gives you over using just standard Web API actions (examples: http://monox.mono-software.com/blog/post/Mono/233/Async-upload-using-angular-file-upload-directive-and-net-WebAPI-service/ and http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-%28spa%29-with-aspnet-web-api-and-angularjs).

Since these calls to Web API are asynchronous anyway I don't know why we need to make these method calls asynchronous. Wouldn't it be better to use just standard Web API calls?

I don't know if stackoverflow is the right place for this but I was hoping for an explanation on why calls are done this way.

Answer 1

The benefit of async-await on the server is scalability and performance. When you replace synchronous (blocking) operations with asynchronous (non-blocking) ones you free up threads that were previously blocked waiting which you can use to handle other requests concurrently.

async-await enables you to do more with less resources.

Let's assume we have this synchronous method:

public void Process()
{
    for (int i = 0; i < 1000; i++)
    {
        Math.Sqrt(i);
    }

    Thread.Sleep(3000); // sync I/O
}

By making it async:

public async Task ProcessAsync()
{
    for (int i = 0; i < 1000; i++)
    {
        Math.Sqrt(i);
    }

    await Task.Delay(3000) // async I/O
}

We can use a single thread to process multiple requests of the same method because the thread handling the request is freed up when you await the asynchronous operation.