Chaining multiple jQuery ajax requests

Question

I have the following code:

$.when(loadProjects())
    .then(function() {

        $.when.apply($, buildRequests(projects))
        .then(function(data) {

            $.when.apply($, vcsRequests(buildTypes))
            .then(function(data) {

                $.when.apply($, vcsDetailRequests(vcsRoots))
                .then(function(data) {
                    alert('done');
                });

            });

        });

    });

Each of the functions passed into when.apply() return arrays of requests. I cannot perform the buildRequests calls until the calls from loadProjects() has finished as they rely on information returned from those calls. Each call depends on information returned by the previous call, so they must be in this order. I need to know when all the calls have finished so I can process the data returned.

Is there a cleaner way to approach this?

Seems you have lot of requests to chain. I would then consider combining all request into single one.... much more efficient than chaining... — Jovan Perovic
– Jovan Perovic, Commented Feb 10, 2012 at 10:12
How would I go about doing that? I have to call one after another because of the API I'm using. — JFoulkes
– JFoulkes, Commented Feb 10, 2012 at 10:16
I posted the answer on how to achieve this because comments don't really like code formatting :) — Jovan Perovic
– Jovan Perovic, Commented Feb 10, 2012 at 10:27
I thought the example in this answer was incredibly useful in understanding the concept of pipes: jquery-ajax multiple calls — blong
– blong, Commented Jan 24, 2013 at 22:10

Supr · Accepted Answer · 2012-02-10 10:45:30Z

2

I came across yepnope.js the other day. I haven't tried it myself yet, but it might be helpful if you're doing a lot of ajax loading.

Actually thinking this over makes me realize that yepnope.js is not really applicable to your case. What I would consider in your case is to have loadProjects() et al return a single promise by applying when() internally in each function. Also putting pipe() to use could lead to something like

loadProjects().pipe(buildRequests).pipe(vcsRequests).pipe(vcsDetailRequests);

Sample buildRequests():

function buildRequests(projects){
    // Do something using projects
    // ...

    var requestsPromise = ...; // Finally get ajax promise for requests
    return requestPromise;
}

The result of the requestPromise will then be passed into the next piped function once it is resolved/rejected.

From the docs on pipe():

// Example: Chain tasks: 

var request = $.ajax( url, { dataType: "json" } ),
    chained = request.pipe(function( data ) {
      return $.ajax( url2, { data: { user: data.userId } } );
    });

chained.done(function( data ) {
  // data retrieved from url2 as provided by the first request
});

edited Feb 10, 2012 at 10:45

answered Feb 10, 2012 at 10:08

Supr

19.1k3 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JFoulkes Over a year ago

Do you have any samples/links on how to do this? I'm new to the whole deffered/promise stuff

Supr Over a year ago

Added sample of one of the functions. The others would be similar. See the included link to .pipe() for more about how it works.

JFoulkes Over a year ago

I see how pipe will help, the only issue I have now is making this work with a dynamic number of requests which each function returns...

Supr Over a year ago

If you don't need to wait for each request individually, then wrap them up in when(), and then in the consumer do function buildRequests(){var projects = arguments; /* then do something with projects, etc. */}. The builtin arguments variable contains all the arguments passed to the function, and when() will be passing the result of each of the project-promises.

Arif · Accepted Answer · 2016-03-28 04:30:10Z

Dependence chain of AJAX requests : You can chain multiple AJAX request — for example, first call retrieves the user details of a user, and we need to pass that value to second script. Remember that $.then() returns a new promise, which can be subsequently passed to the $.done() or even another $.then() method.

var a1 = $.ajax({
             url: '/first/request/url',
             dataType: 'json'
         }),
    a2 = a1.then(function(data) {
             // .then() returns a new promise
             return $.ajax({
                 url: '/second/request/url',
                 dataType: 'json',
                 data: data.userId
             });
         });

a2.done(function(data) {
    console.log(data);
});

Jovan Perovic · Accepted Answer · 2012-02-10 10:26:56Z

1

.... response according to my comment on original post:

Seems you have lot of requests to chain. I would then consider combining all request into single one.... much more efficient than chaining...

Well, something like this:

PHP:
$projects = YourAPI::loadProjects();
$builds = YourAPI::getBuilds($projects);
$vcs = YourAPI::getVCS($builds);
$details = YourAPI::getVCSDetails($vcs);

// for example
return json_encode($details);

// OR, if you need all the data
$results = array( 
    "projects" => $projects,
    "builds" => $builds,
    "vsc" => $vcs,
    "details" => $details
);
return json_encode($results);

This way, you have inherent synhronization between calls AND less HTTP trafiic ;)

answered Feb 10, 2012 at 10:26

Jovan Perovic

20.2k5 gold badges47 silver badges92 bronze badges

3 Comments

JFoulkes Over a year ago

I have no intention of using anything apart from javascript

Jovan Perovic Over a year ago

oook, but those ajax requests call some server-side scripts, be it PHP or any other language, is it not?

JFoulkes Over a year ago

They are ajax requests to an API which I have no control over

Collectives™ on Stack Overflow

Chaining multiple jQuery ajax requests

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related