Javascript Promise/then Example

I wanted to create an example for my understanding of Promise().then(). I've created an operation that takes time and have operations that must be completed synchronously. The code

Solution 1:

You have to call resolvewhen the asynchronous operation is complete.

With this code:

longOperation(id);
resolve(null);

You are starting the asynchronous operation and then immediately resolving the promise.

---

If you want to pass the value of count to your then function, then you need to pass it when you call resolve(). At the moment you are passing null.

---

This version of your code modifies it to pass resolve as a callback and only call it at the right time.

// Example: long operation that takes time to executevar longOperation = function(id, resolve) {
  var time = 1000 * Math.random();
  console.log('[' + id + '] Operation started for: ' + time + 'ms');

  setTimeout(function(err) {
    console.log('[' + id + '] Completed operation:   ' + time + 'ms');
    var count = id * 10;
    resolve(count);
  }, 1000 * Math.random());
};

// Create new promise for longOperationvar longOpPromise = function(id) {
  returnnewPromise(function(resolve, reject) {
    longOperation(id, resolve);
  });
};

// Create sequencingvar runLongOperation = function(callback) {
  var count1;
  longOpPromise(1).then(function(count) {
    count1 = count;
    console.log('Count 1: ' + count1);

    longOpPromise(2).then(function(count2) {
      console.log('Count 2: ' + count2);
      callback(null, count1, count2);
    });
  });
};

// RunrunLongOperation(function(err, count1, count2) {
  if (err) console.error(err);
  console.log('Count 1 ' + count1 + ' | Count 2: ' + count2);
});

Solution 2:

I think the main issue here is that your async action (setTimeout) is not involved with your promise chain.

The resolve(null) after longOperation(id) will immediately return null and not wait for the longOperation function to finish its timeout interval.

Something like this will work:

// Example: long operation that takes time to executevar longOperation = function(id) {

    var time = 1000 * Math.random();

    console.log('[' + id + '] Operation started for: ' + time + 'ms');

    returnnewPromise(function(resolve) {
        setTimeout(function(err) {
            console.log('[' + id + '] Completed operation:   ' + time + 'ms');
            var count = id * 10;
            resolve(count);
        }, time);
    });

};

// Create new promise for longOperationvar longOpPromise = function(id) {
    returnlongOperation(id);
};

I moved the new Promise inside of the longOperation and resolve only when the setTimeout callback is handled.

Solution 3:

One problem is these two lines:

longOperation(id);
resolve(null);

Because longOperation is an asynchronous function, resolve(null) will run BEFORE longOperation has finished running.

I would combine the two first functions to make sure that the promise does not resolve UNTIL the callback in the setTimeout has run:

var longOpPromise = function(id) {

    var time = 1000 * Math.random();

    console.log('[' + id + '] Operation started for: ' + time + 'ms');

    returnnewPromise(function(resolve, reject) {
        setTimeout(function(err) {
            console.log('[' + id + '] Completed operation:   ' + time + 'ms');
            var count = id * 10;
            resolve() // Now the promise won't resolve until here.
        }, 1000 * Math.random());
    })


};

I would also avoid mixing callbacks and promises like you are doing - except for inbuilt functions like setTimeout, if you are using promises then you should be able to avoid using callbacks.