sequential call using promise inside loop

Question

i want to perform synchronous operation of functions using promise. I have loop that passes the data to be inserted to insert function and after inserting one row i want to check the no. of rows exists in table hence i am performing select operation.

But the issue is if there are 3 records then it inserts all 3 records and after that my select function gets executed. what i want is after insertion of one record select function gets called.

here is my pseudo code as entire code involves lot of operations

for(var i=0; data.length ; i++){

 self.executeFeedbackTrack(data);

}


executeFeedbackTrack:function(callInfo){
    var self=this;
   return  self.insertFeedbackTrack(callInfo).then(function(data){

                console.log("insertFeedbackTrack status "+status);

        return self.getFeedbackTrack();

    });
},

getFeedbackTrack :function(){

    return new Promise(function(resolve,reject){
         var objDBFeedbackTrack = new DBFeedbackTrack();
        objDBFeedbackTrack.selectFeedbackTrack(function(arrayCallRegisters){
            if(arrayCallRegisters){

            console.log("notification.js no. of feedbacks "+arrayCallRegisters.length);

            resolve(arrayCallRegisters.length);

            }

        });
    });


},
insertFeedbackTrack :function(callInfo){

return new Promise(function(resolve,reject){
     var objDBFeedbackTrack = new DBFeedbackTrack();
     objDBFeedbackTrack.insertFeedbackTrack(callInfo.callNumber,callInfo.callServiceType,function(status){

             resolve(status);
            $('#loader').hide();

     });
});

}

Answer 1

I ran into this problem recently and solved it as shown below. This is very similar to the answer by @Ethan Kaminsky, but only uses callbacks. This may be useful for people avoiding promises for whatever reason.

In my application the asynchronous function may fail and can safely be retried; I included this logic because it's useful and doesn't overly complicate the routine, but it is not exercised in the example.

// Some callback when the task is complete
function cb(...rest) { window.alert( `${rest.join(', ')}` ) }

// The data and the function operating on the data
// The function calls "callback(err)" on completion
const data = [ 'dataset1', 'dataset2', 'dataset3' ]
const doTheThing = (thingDone) => setTimeout( thingDone, 1000 )

let i = -1                    // counter/interator for data[]
let retries = 20              // everything fails; total retry #

// The do-async-synchronously (with max retries) loop
function next( err ) {
    if( err ) {
        if( ! --retries ) return cb( 'too many retries' )
    } else if( ! data[++i] ) return cb( undefined, 'done-data' )

    console.log( 'i is', i, data[i] )
    doTheThing( next, data[i] )       // callback is first here
}

// start the process
next()

Answer 2

Here's how I would sequentially call promises in a loop (I'm using ES7). First, let's define some basic data:

const data = [0,1,2,3];

Then, let's simulate some long running process, so let's create a function that returns a Promise (you can think of this as a simulated network request, or whatever suits your needs)

const promiseExample = (item) =>
  new Promise((res) => {
    setTimeout(() => {
      console.log('resolved ', item);
    res(item);
  }, 1000);
});

Now, let's create an array of promises. What the next line of code does is: for every item in the array data, return a promise factory. A promise factory is a function that wraps a certain promise without running it.

const funcs = data.map(item => async () => await promiseExample(item));

Now, the actual code starts here. We need a function that does the actual serialization. Since it has to handle an array of promiseFactories, I split it in two functions, one for the serialization of a single promise, and one for handling an array of promiseFactories.

const serializePromise = promiseFactoryList =>
  promiseFactoryList.reduce(serialize, Promise.resolve([]));

const serialize = async (promise, promiseFactory) => {
  const promiseResult = await promise;
  const res = await promiseFactory();
  return [...promiseResult, res];
};

Now, you can simply call it like this:

serializePromise(funcs).then(res => {
    console.log('res', res);
});

As you can see, the code is pretty simple, elegant, functional, and doesn't need any external dependency. I hope this answers your question and helps you!

const serializePromise = promiseFactoryList =>
  promiseFactoryList.reduce(serialize, Promise.resolve([]));

const serialize = async (promise, promiseFactory) => {
  const promiseResult = await promise;
  const res = await promiseFactory();
  return [...promiseResult, res];
};

const data = [0,1,2,3];

const promiseExample = (item) =>
  new Promise((res) => {
	setTimeout(() => {
	  console.log('resolved ', item);
	  res(item);
    }, 1000);
  });

const funcs = data.map(item => async () => await promiseExample(item))

serializePromise(funcs).then(res => {
  console.log('res', res);
});

Answer 3

I use yield for such cases if using generator functions.

for(var i = 0; i < order.tasks.length; i++){
        if(order.tasks[i].customer_id === 0){
          var name = order.tasks[i].customer_name.split(" ")
          const customers = yield db.queryAsync(
            `INSERT INTO customers(
              business_id)
             VALUES(?)
            `,[order.business_id])
        }
      }

Or else I use self-calling functions in case of callbacks.

var i = 0;
(function loop() {
    if (i < data.length) {
        task_ids1.push([order.tasks[i].task_id])
        i++;
        loop();
    }
}());

Answer 4

This can be solved by using a very handy JS library Ramda. Concept is to use two methods, one is R.partial and another is R.pipeP.

First create a promises array from your data array, like following.

var promises = data.map(function(i) {
  return R.partial(sample, [i])
});

Then you can pass this promise to R.pipeP, so that it can be executed one after another. like below.

var doOperation = R.pipeP.apply(this, promises)

Please execute following snippet attached.

// Sample promise returning function
function sample(d) {
  return new Promise(function(resolve, reject){
    setTimeout(function() {
      console.log('resolved for:' + d);
      resolve(d);
    }, 1000)
  })
}

// Sample data
var data = [1, 2, 3, 4, 5]

// Converting data array to promise array
var promises = data.map(function(i) {
  return R.partial(sample, [i])
});

var doOperation = R.pipeP.apply(this, promises)
doOperation();

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

So in your case, the code will look like this

var promises = data.map(function(i) {
  return R.partial(self.executeFeedbackTrack, [i])
});
var doOperation = R.pipeP.apply(this, promises)
doOperation();

Answer 5

The previous answer is good, but if you are using nodejs, or babel, or you are using only modern browsers. You can use an async-await pair, it is es8 stuff.

let insertFeedbackTrack = function(){ return new Promise(/***/)};
let getFeedbackTrack = function(){ return new Promise(/***/)};
let processResult = async function(data){
   let feedbacks = [];
   for(let i=0;i<data.length;i++){
      let insertedResult = await insertFeedbackTrack(data[i]);//perhaps you will return an id;
      let feedbackTrack = await getFeedbackTrack(insertedResult.id);
      feedbacks.push(feedbackTrack);
   }
   return feedbacks;
} 

processResult(data).then(/** do stuff */)

Answer 6

It looks to me like this is caused by executing a series of asynchronous inserts, and assuming that the get of insert n (inside of a .then()) is called before insert n+1 is executed. However, I'm not aware of any such guarantee, in JavaScript; all that I'm familiar with is that then n will be called after insert n, not that it would be called before insert n+1.

What I'd suggest is avoiding this mix of traditional and callback-based code, and instead put the iteration step inside getFeedbackTrack().then. Assuming this understanding of the issue is correct, then something like the following should work:

function iterate(i) {
    if (i < data.length) {
        obj.insertFeedbackTrack(data[i]).then(function(insertResult) {
            self.getFeedbackTrack().then(function(getResult) {
                // this line is the important one, replacing the `for` loop earlier
                iterate(i+1);
            });
        });
    }
}

iterate(0);

By doing that, you would guarantee that insert for the next element does not occur until the current select executes successfully.

Naturally, you may also want to restructure that to use chained .then instead of nested; I used nested rather than chained to emphasize the ordering of callbacks.