Asynchronous use of Jquery Deferred

There was a scenario like this in our recent QA system transformation.

Some data items in the QA system need to be obtained from the JIRA platform (a foreign project and Transaction Tracking Tool). The JIRA platform provides a complete Rest API.

The requirement is that many data items must be obtained from the JIRA platform before submitting a project in the QA system. The Rest API of each request is different,

At the same time, you must wait until all requests return data before submitting the project.

Because I have studied Jquery Deferred before, I found that it is more appropriate to use this scenario.

I will not explain Jquery Deferred too much here. If you are not familiar with Jquery Deferred, you can read the following article first.

Http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

Http://www.cnblogs.com/justany/archive/2013/01/20/2867444.html

 

Now let's simulate the above scenario. (the complete DEMO download is provided at the end of the article)

Assume that all the requests to obtain data items are processed by JqueryHandler. ashx. Thread. Sleep () is used in the handler to simulate the network latency when requesting the Rest API.

  =  action = context.Request.Form[                 WriteSuccess(HttpContext context,  action,              index = context.Request.Form[ json =  + seconds +  + index + 

 

After the data server is simulated, let's send a request to obtain data items.

<Script src = "Scripts/jquery-1.7.2.min.js" type = "text/javascript"> </script> <script type = "text/javascript"> "# btn_Request" "# div_Content" cmd.html ("" requestUrl = "JqueryHandler. ashx "requestInfoArr =" delay1Seconds "" delay2Seconds "" delay3Seconds "deferredOBJ = (I = 0; I <requestInfoArr. length; I ++ = jsonData. index = "POST" "json" (data. flag = 0 result = requestInfoArr [data. index]. action + "request Time consumed: "+ data. msg +" second "" # div_Content "). append ($ (" <p/> "" ajax request failed to get data! "$. When (deferredOBJ [0], deferredOBJ [1], deferredOBJ [2 result = "all requests are completed... "" # div_Content "). append ($ ("<p/>" "failed to get metric data from JIRA. Please try again" </script>

 

Here the clever lies in

This is because requests are asynchronous. In the success and error functions, obtaining is always 2 (because it is 2 ).

 

 

Using firebug, we can see that three ajax requests are sent at the same time, so the three requests only took 3.09 s.

If the three ajax requests are executed sequentially, 2.03 s + 1.06 s + 3.09 s = 6.18 s. jquery deferred saves twice the time.