Async and await Methods

Question

I have a clarification regarding async and await methods in C# in a practical application. Consider the following flow which is a simple version of the working code:

Helper.cs

public class Helper
{
   public CustomDTP _customDTO = null;
   public async Task<Analysis> GetAnalysis(string name, int id,string option)
        {

          if(option == "a")
           {
             //Call ThirdParty service and get Data
             _CustomDTO.Data1 = await GetData1(name,id);
           }
          else if(option == "b")
           {
             //Call ThirdParty service and get Data
             _CustomDTO.Data2 = await GetData2(name,id);
           }
          return _customDTO;
        }
}

FunctionController.cs

    [HttpPost]
    [EnableQuery]
    [ODataRoute("ProcessData")]
    public async Task<string> ProcessData(HttpRequestMessage message)
    {

            var js = new JavaScriptSerializer();
            var Result = message.Content.ReadAsStringAsync().Result;
            info = js.Deserialize<CustomDTO>(Result);

            Helper Servc = new Helper();

            var DetailData = await Servc.GetAnalysis(info);

            Data = Newtonsoft.Json.JsonConvert.SerializeObject(DetailData);
        return Data;
       }

processing.js

//Knockout js application

self.compositionComplete = function()
{
  self.Data1();
  self.Data2();
}
 self.Data1 = function () {
            var getURL = Url + "/ProcessData";
            var initData = {
                "name": self.name,
                "id": self.id,
                "option": "a"
            }
        $.ajax({
                url: getURL,
                cache: false,
                type: "POST",                
                data: JSON.stringify(initData),
                dataType: 'json',
                success: function (result) {
                    //Rendering Data Logic for Option a
        });
}

self.Data2 = function () {
            var getURL = Url + "/ProcessData";
            var initData = {
                "name": self.name,
                "id": self.id,
                "option": "b"
            }
        $.ajax({
                url: getURL,
                cache: false,
                type: "POST",                
                data: JSON.stringify(initData),
                dataType: 'json',
                success: function (result) {
                    //Rendering Data Logic for Option b
        });
}

Now , the issue is GetData1() of Third party service takes less time (eg : 2 seconds) and GetData2() takes more time(eg: 100 seconds) . The idea of making two ajax calls and using async and await was to render the self.Data1 on the screen and do not wait until self.Data2 has been retrieved . Unfortunately in this it is not happening , I will have to wait for 100 seconds for both Data 1 and Data 2 to be shown on the screen . What is that I need to change to ensure separate threads are used for GetData1 and GetData2 .

One more observation is that , if I call self.Data2 on success on self.Data1() like below, I am able to see Data1 on the screen instantly but that is not what I am looking for . I need both Data1 and Data2 to be rendered parallely and aschrynously .

self.Data1 = function () {
            var getURL = Url + "/ProcessData";
            var initData = {
                "name": self.name,
                "id": self.id,
                "option": "a"
            }
        $.ajax({
                url: getURL,
                cache: false,
                type: "POST",                
                data: JSON.stringify(initData),
                dataType: 'json',
                success: function (result) {
                    self.Data2();
        });
}

I am sure that the thread is getting blocked after using await but I am not able to get the resolution for making separate calls and render Data1 and Data2 parallely. Any inputs on this?

Answer 1

I'm not sure but everything seems to be okay. I didn't work with knockout how ever this part seems to me "wait until all task complete" or something like that

self.compositionComplete = function()
{
  self.Data1();
  self.Data2();
}

something like fired when both of them is finished. Maybe you can use different self .