Sequentially chaining promises from 2 separate functions

Question

I've reviewed all the related topics, but for some reason am unable to understand the correct syntax of resolving my case. It's Javascript on Framework7 platform.

There is a function that has a $.each inside, which cycles through an array of items and executes an async POST operation to update that item. There's a requirement to update items in two separate locations, so I execute this function twice, each time with a different arguments.

What would be the best approach to chain those two functions together in a sequence to be able to reload the page, as all async requests have been executed?

Thank you in advance!

UPDATE!

I managed to get this far, but promises.then doesn't result into "Success":

var tasks = [1,2,3];
var docs = [3,4,5];
var functions = [asyncOperation(tasks),asyncOperation(docs)]

var asyncOperation = function(items) {
 return new Promise(function (resolve, reject) {
   var deferreds = [];
   items.forEach(function(i,e){
   deferreds.push(
       app.request({
       url: buildurlnew,
       type: "POST",
       headers: buildheader,
       contentType: "application/json;odata=verbose",
       data: JSON.stringify(UpdatePayload),
       success: function (data) {},
       error: function(xhr, textStatus, errorThrown ) {}
   )
   });
   return deferreds;
});
}

var promises = Promise.all(functions);
promises.then(function(results) {
//console.log("Success");
});

UPDATE 2 - The changed code, as per suggestions

var processtasks = function(array, dig) {
   var getlistname = GetItemTypeForListName("Alerts")
   var itemProperties = {'Title' :"Test"};
   var UpdatePayload = {'__metadata': {'type': getlistname}};
   for(var prop in itemProperties){
      UpdatePayload[prop] = itemProperties[prop]
   }
   var buildurl = "<REST URL to Sharepoint list>"
   var buildheader = { "Accept": "application/json;odata=verbose", "X-RequestDigest" : dig, "X-HTTP-Method": "MERGE", "If-Match": "*"}
   return Promise.all(array.map(function(item) {
      buildurlnew = buildurl+"("+item+")";
      return app.request({
         url: buildurlnew,
         type: "POST",
         headers: buildheader,
         contentType: "application/json;odata=verbose",
         data: JSON.stringify(UpdatePayload),
         success: function (data) {},
         error: function(xhr, textStatus, errorThrown) {}
      });
   }));
}

var processitems = function(listName, array, dig, type, source, web) {
   var getlistname = GetItemTypeForListName(listName)
   var buildurl = "<REST URL to Sharepoint list>"
   var buildheader = { "Accept": "application/json;odata=verbose", "X-RequestDigest" : dig, "If-Match": "*"}
   return Promise.all(array.map(function(item) {
      var itemProperties = {'UserId' : app.data.UserID, 'Title' : item};
      var UpdatePayload = {'__metadata': {'type': getlistname}};
      for(var prop in itemProperties){
         UpdatePayload[prop] = itemProperties[prop]
      }
      return app.request({
          url: buildurl,
          type: "POST",
          headers: buildheader,
          contentType: "application/json;odata=verbose",
          data: JSON.stringify(UpdatePayload),
          success: function (data) {},
          error: function(xhr, textStatus, errorThrown ) {}
      });
   }));
}

processitems(listName, array, dig, type, source, web).then(function(r1) {
   return processtasks(ids,dig);
}).then(function(r2) {
   console.log(r2);
}).catch(function(err) {
   console.log(err);
});

Answer 1

First you have to fix your asyncOperation() function because it is not properly returning a promise that is connected to the underlying async operations you're doing.

This code doesn't really make much sense. You have a basic structure of this:

var asyncOperation = function(items) {
    return new Promise(function(resolve, reject) {
        // body of function here
    });
}

So far so good. But, what you need to do inside that promise executor function is start some async operation and call resolve or reject when you're done. You aren't doing that. Therefore, your promise never resolves or rejects.

Instead, you are returning an array of deferreds from the promise executor callback which does nothing. The promise executor function does not expect any return value so returning a value from it does nothing. You have to indicate completion of your asynchronous operation in the promise executor by calling either resolve(...) or reject(...).

If app.request() returns a promise, then you don't even need to make your own promise at all. You can just do something like this:

var asyncOperation = function(items) {
    return Promise.all(items.map(function(item) {
        return app.request(...);
    }));
}

asyncOperation(...).then(function(results) {
    // all done here
}).catch(function(err) {
    // error here
});

items.map() generates an array of promises and Promise.all() returns a new single promise that monitors that array of promise and will resolve when all the promises in the array resolve or reject when any one of them rejects.

---

If app.request() does not return a promise, then you probably should make a "promisified" version that does so you can use it with promise functions like Promise.all(), perhaps using util.promisify().

---

To run two of these in parallel (which seems practical since they don't appear to depend upon one another), you could do this:

Then, once you are properly returning a promise for your function, if you have two of these, you can just use Promise.all() on more than one function call:

Promise.all([asyncOperation(...), asyncOperation(...)]).then(function(results) {
    // both done here
    // not the result may be an array of arrays
}).catch(function(err) {
    // error here
});

---

What would be the best approach to chain those two functions together in a sequence

To run them in sequence, you can do this:

asyncOperation(args1).then(function(r1) {
    return asyncOperation(args2);
}).then(function(r2) {
    console.log(r2);
}).catch(function(err) {
    console.log(err);
});