What is it all about
I have been seeing many queries in SCN , Stackoverflow and other forums about parallelizing multiple ajax/odata calls and get the response of the calls at once after completing all the request in the queue .
In this blog I discuss about the way I handle such scenarios in my Nodejs projects and UI5 developments.
Before you read further
I use Promises to achieve this scenario . Read about Promises here first.
Scenario
I developed an Odata service, having an entity set "DelaySet". This entity set has one key , delay , accepts an integer parameter and responds to the call only after the delay
/DelaySet(3) => responds after 3 seconds.
In my application , I am making 5 asynchronous calls with various delays ( say 1, 2 , 3 , 4 & 5 seconds each ) .
If you see, these calls will be triggered at once ( in the network tab )
And the response was like this . Now , we want to get the response of all these calls upon completing all the calls.
Write Promises
Lets wrap each of these requests in Promises. Instantiating Promise instances , the OData calls in the constructor function body starts.
Lets wrap one of our calls in a Promise
If you are not familiar with the ()=>{} syntax , please check Arrow functions this is really good and helpful
The above piece of code executes the promise and after completing the OData execution , it resolves the response data ( we don't need a "then" chain as we don't need the data here )
Like this , Defined all the OData calls in promises
We will see all the OData calls executing in parallel ( like before ) . To capture the results of all the resolved promises , lets pass "Promise.all" method
Here , after resolving all the passed promise instances , the resolved responses shall be passed as an array .
Note - There are plenty other possible methods to achieve this . But I love coding JS with promises , which gives better control over asynchronous code blocks .
BR - Sreehari
I have been seeing many queries in SCN , Stackoverflow and other forums about parallelizing multiple ajax/odata calls and get the response of the calls at once after completing all the request in the queue .
In this blog I discuss about the way I handle such scenarios in my Nodejs projects and UI5 developments.
Before you read further
I use Promises to achieve this scenario . Read about Promises here first.
Scenario
I developed an Odata service, having an entity set "DelaySet". This entity set has one key , delay , accepts an integer parameter and responds to the call only after the delay
/DelaySet(3) => responds after 3 seconds.
In my application , I am making 5 asynchronous calls with various delays ( say 1, 2 , 3 , 4 & 5 seconds each ) .
var call_1 = "/DelaySet(1)" ;//1 second delay
var call_2 = "/DelaySet(2)" ;//2 second delay
var call_3 = "/DelaySet(3)" ;//3 second delay
var call_4 = "/DelaySet(4)" ;//4 second delay
var call_5 = "/DelaySet(5)" ;//5 second delay
var success = (data)=>{
console.log(data.status);
};
this.oModel.read(call_1,{
success : success
});
this.oModel.read(call_4,{
success : success
});
this.oModel.read(call_3,{
success : success
});
this.oModel.read(call_5,{
success : success
});
this.oModel.read(call_2,{
success : success
});If you see, these calls will be triggered at once ( in the network tab )
Delayed Calls - I increased the delay to take screenshot
Console
And the response was like this . Now , we want to get the response of all these calls upon completing all the calls.
Write Promises
Lets wrap each of these requests in Promises. Instantiating Promise instances , the OData calls in the constructor function body starts.
//Promise Syntac
var oPromise = new Promise((resolve,reject)=>{
//code we would like to execute
resolve(<data>) ; // when the execution of code completes succesfully
reject(<err>) ; //when it fails
});Lets wrap one of our calls in a Promise
let p1 = new Promise((resolve,reject)=>{
this.oModel.read(call_3,{
success : (data)=>{
resolve(data);
} ,
error : (err)=>{
reject(err);
}
});
});If you are not familiar with the ()=>{} syntax , please check Arrow functions this is really good and helpful
The above piece of code executes the promise and after completing the OData execution , it resolves the response data ( we don't need a "then" chain as we don't need the data here )
Like this , Defined all the OData calls in promises
let p1 = new Promise((resolve,reject)=>{
this.oModel.read(call_3,{
success : (data)=>{
resolve(data);
} ,
error : (err)=>{
reject(err);
}
});
});
let p2 = new Promise((resolve,reject)=>{
this.oModel.read(call_2,{
success : (data)=>{
resolve(data);
}
});
});
let p3 = new Promise((resolve,reject)=>{
this.oModel.read(call_5,{
success : (data)=>{
resolve(data);
}
});
});
let p4 = new Promise((resolve,reject)=>{
this.oModel.read(call_4,{
success : (data)=>{
resolve(data);
}
});
});
let p5 = new Promise((resolve,reject)=>{
this.oModel.read(call_1,{
success : (data)=>{
resolve(data);
}
});
});We will see all the OData calls executing in parallel ( like before ) . To capture the results of all the resolved promises , lets pass "Promise.all" method
let finalPromise = Promise.all([p1,p2,p3,p4,p5]).then((dataFromAll)=>{
console.log(dataFromAll);
}).catch((err)=>{ console.log(err) });Here , after resolving all the passed promise instances , the resolved responses shall be passed as an array .
sequence of objects in the array is as the sequence of promise instance we pass
Note - There are plenty other possible methods to achieve this . But I love coding JS with promises , which gives better control over asynchronous code blocks .
BR - Sreehari
- SAP Managed Tags:
3 Comments
