Use deferred to get list items

Question

I am dealing with this code. I need top add another ajax to get list items base on first loop. The result is not correct unless write alert("WAIT WAIT").

loadRestRequest("/_api/Web/lists/GetByTitle('KSF')/items?$filter=Master eq 94 " ,
    function (data) {
            $.each(data.d.results, function (idx, val) {
                ksfId = val.ID;
                //do some stuff
                loadRestRequest("/_api/Web/lists/GetByTitle('KPI')/items?$filter=KSF eq " + ksfId,
                    function (data) {
                        //do some stuff
                    });
                alert("WAIT WAIT");
            });

    });

I call below function twice to get list items

function loadRestRequest(url, callback) {
    var async = true;
    var res = null;
      if(callback == null)
    {
    async = false;
    callback = function (data) {
        res = data.d;
    }
      }
    $.ajax
    url: url,
        typ({
            e: "GET",
            async: async,
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: callback,
            error: function (error) {
                alert(JSON.stringify(error));
            }
        });
   return res;
}

I googled this problem and I found out these functions are not synchronized. Calling wait or sleep function is not working right because there is no exact estimation for query time. I should work with $.Deferred but I don`t know how to use it in my loadRestRequest function. my code is running on sharepoint 2013

score 0 · Answer 1 · answered Nov 11 '18 at 17:08

To query the list of async requests you could utilize jQuery.when()

var promises = $.map(array, function(item) {
    return $.ajax({
        url: url,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
   });
});
return $.when.apply($, promises);

Avoid async = false Per official documentation:

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead

Example

The example demonstrates how to chain asynchronous calls (main query and the list of sub queries):

function getRequest(url){
   return $.ajax({
     url: url,
     method: "GET",
     headers: { "Accept": "application/json; odata=verbose" },
   });
}



var mainQueryResult = null;
var subQueriesResult = null;
var requestUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Site Pages')/items";
getRequest(requestUrl)
.then(function(data){
   mainQueryResult = data.d.results;
   var promises = $.map(data.d.results, function(item) {
         var subRequestUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Site Pages')/items(" + item.Id + ")";   
         return getRequest(subRequestUrl);
   });
   return $.when.apply($, promises); 
})
.then(function(){
    subQueriesResult = $.map(arguments, function (args,idx) {
        return args[0].d; 
    })

    //print results
    console.log(mainQueryResult);
    console.log(subQueriesResult);
});

thank you vadim, my problem was solved. I did not use promises() as I leave comment, resolve() and done() are used in code. — Hoorie, Nov 11 '18 at 18:40

Hoorie · Accepted Answer · 2018-11-11T18:42:07.490

I learn about asynchronous ajax callback. This link help me to understand differences between done() and then(). below code solved my problem, all action callback do in ajax success function, after that in done() do some stuff which need run after callback.

  loadRestRequest("/_api/Web/lists/GetByTitle('KSF')/items?$filter=Master eq 94 ").done(function (data) {
             $.each(data.d.results, function (idx, val) 
             //do some stuff after first callback  
             ksfId = val.ID;
             loadRestRequest1("/_api/Web/lists/GetByTitle('KPI')/items?$filter=KSF eq " + ksfId).done(function (data){
                             //do some stuff after second callback
                        })       
                    });
            });

also two separated function are used in top of code.

function loadRestRequest(url) {
    var dfd = $.Deferred();
    $.ajax
    url: url,
        typ({
            e: "GET",
            async: true,
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: function (data) {
                 //do some stuff that you need result
                dfd.resolve(data);
            },
            error: function (error) {
                alert(JSON.stringify(error));
                dfd.reject(error);
            }
        });
   return dfd;
}


function loadRestRequest1(url) {
    var dfd = $.Deferred();
    $.ajax
    url: url,
        typ({
            e: "GET",
            async: true,
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: function (data) {
                //do some another stuff that you need result
                dfd.resolve(data);
            },
            error: function (error) {
                alert(JSON.stringify(error));
                dfd.reject(error);
            }
        });
    return dfd;
}

Use deferred to get list items

2 Answers2