You can use the jQuery's when to get data as below:
function SPData() {
function getJsonDataAsync(url) {
// returning the $.ajax object is what makes the next part work...
return $.ajax({
url: url,
method: "GET",
contentType: "application/json",
headers: {
accept: "application/json;odata=verbose"
}
});
}
var requestURI1 = _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('List1')/items?&$orderby=Title"
var requestURI2 = _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('List2')/items?&$orderby=Title"
var requestURI3 = _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('List3')/items?&$orderby=Title"
var req1 = getJsonDataAsync(requestURI1);
var req2 = getJsonDataAsync(requestURI2);
var req3 = getJsonDataAsync(requestURI3);
// now we can do the next line, because req1/2/3 are actually deferreds
// being returned from $.ajax
jQuery.when(req1, req2, req3).done(function(resp1, resp2, resp3) {
/* do something with all of the requests here...
resp1/2/3 correspond to the responses from each call and are each an
array that looks like: [data, statusText, jqXHR], which means that your
data is in resp1[0], resp2[0], etc. */
});
}
Reference - REST API multiple calls
You can also use the batch api as below:
Just add reference to sp-rest-batch-execution.js
and after that try below code:
var getEndPoint1 = appweburl + "/_api/web/lists/getbytitle('List1')/items?&$orderby=Title";
var getEndPoint2 = appweburl + "/_api/web/lists/getbytitle('List2')/items?&$orderby=Title";
var getEndPoint3 = appweburl + "/_api/web/lists/getbytitle('List3')/items?&$orderby=Title";
var commands = [];
batchRequest = new BatchRequest();
batchRequest.endpoint = getEndPoint1;
batchRequest.headers = { 'accept': 'application/json;odata=verbose' }
commands.push({ id: batchExecutor.loadRequest(batchRequest), title: "Rest Batch Get Items 1" });
batchRequest = new BatchRequest();
batchRequest.endpoint = getEndPoint2;
batchRequest.headers = { 'accept': 'application/json;odata=verbose' }
commands.push({ id: batchExecutor.loadRequest(batchRequest), title: "Rest Batch Get Items 2" });
batchRequest = new BatchRequest();
batchRequest.endpoint = getEndPoint3;
batchRequest.headers = { 'accept': 'application/json;odata=verbose' }
commands.push({ id: batchExecutor.loadRequest(batchRequest), title: "Rest Batch Get Items 3" });
batchExecutor.executeAsync().done(function (result) {
var d = result;
var msg = [];
$.each(result, function (k, v) {
var command = $.grep(commands, function (command) {
return v.id === command.id;
});
if (command.length) {
msg.push("Command--" + command[0].title + "--" + v.result.status);
}
});
console.log(msg.join('\r\n'));
}).fail(function (err) {
console.log(JSON.stringify(err));
});
Works well in SPO - SP-Rest-batch execution
If you are a fan of PnP JS like me, it also provides the batching as below:
var batchResults = [];
var batch = new $pnp.sp.createBatch();
$pnp.sp.web.lists.getByTitle("List1").items.inBatch(batch).get().then(function(d) {
batchResults.push({
custom01: d
});
});
$pnp.sp.web.lists.getByTitle("List2").items.inBatch(batch).get().then(function(d) {
batchResults.push({
custom02: d
});
});
$pnp.sp.web.lists.getByTitle("List3").items.inBatch(batch).get().then(function(d) {
batchResults.push({
custom03: d
});
});
batch.execute().then(function() {
console.log(batchResults);
});
Update - for using PnP js core in IE , you need to add below references as well. jQuery is not required:
es6-promise
fetch
Usage:
<script type="text/javascript" src="/pathinyoursitecoll/es6-promise.min.js"></script>
<script type="text/javascript" src="/pathinyoursitecoll/fetch.js"></script>
<script type="text/javascript" src="/pathinyoursitecoll/pnp.js"></script>
Reference - PnP JS core