How do I create a class that processes two promises and then returns a promise?

Question

I want to create a class whose duty is to poll data sources, collate information into an array of 'alert' objects, and then deliver a subset of those alerts to any other class that wants them.

Because polling happens asynchronously (I'm requesting data from a web service) then I assume that what I actually need to return is a promise which, when fulfilled, will give the correct subset of Alert objects.

But clearly I don't understand how to do this, because the method that is supposed to return the promise returns something else.

Here's my code so far. As you can see, I'm trying to store the promise in an instance attribute and then retrieve it:

export class AlertCollection {

  constructor() {
    this.alerts = null;
  }

  // poll the data sources for alert data; store a promise that resolves
  // to an array of alerts
  poll() {
    this.alerts = this.pollTeapot()
                    .then( (arr) => {this.pollDeliverance(arr);} );

  }                                                                                                  

  // return a promise that fulfils to an array of the alerts you want
  filteredAlerts(filter) {
    return this.alerts; // not filtering for now
  }                                                                                                  

  // return a promise that fulfills to the initial array of alerts
  pollTeapot() {

    let process = (json) => {
      json2 = JSON.parse(json);
      return json2.map( (a) => new Alert(a) );
    };                                                                                               

    message = new MessageHandler("teapot", "alerts")
    return message.request().then( (json) => {process(json);} );
  }

  // Modify the alerts based on the response from Deliverance.
  // (But for the time being let's not, and say we did.)
  pollDeliverance(alerts) {
    return alerts;
  }

}

message.request() returns a promise from the web service. That works. If I snapshot the process function inside pollTeapot() I get the right data.

But, if I snapshot the return value from filteredAlerts() I don't get that. I don't get null either (which would at at least make sense, although it would be wrong.) I get something like { _45: 0, _81: 0, _65: null, _54: null }.

Any pointers would be very much appreciated at this point. (This is in React Native, by the way, if that helps.)

Answer 1

This is going to be a hard one to describe - I have a working example but it's convoluted in that I've had to "mock up" all of the async parts, and use function classes rather than the class keyword - but the idea is the same!

---

There are 2 parts to this answer.

1. It does not make sense to store alerts as an instance variable. They are asynchronous, and wont exist until after the async calls have completed

2. You'll need to chain all of your behaviour onto the initial call to poll

---

In general, you chain promises on to one another like this

functionWhichReturnsPromise()
      .then(functionPointer)
      .then(function(result){
           // some functionality, which can return anything - including another promise
      });

So your code would end up looking like

var alertCollection = new AlertCollection()
alertCollection.poll().then(function(alerts){
    //here alerts have been loaded, and deliverance checked also!
});

The code of that class would look along the lines of:

export class AlertCollection {

  constructor() {
  }

  // poll the data sources for alert data; store a promise that resolves
  // to an array of alerts
  poll() {
    return this.pollTeapot()
               .then(filteredAlerts)
               .then(pollDeliverance);

  }                                                                                                  

  // return a promise that fulfils to an array of the alerts you want
  filteredAlerts(alerts) {
    return alerts; // not filtering for now
  }                                                                                                  

  // return a promise that fulfills to the initial array of alerts
  pollTeapot() {

    let process = (json) => {
      json2 = JSON.parse(json);
      return json2.map( (a) => new Alert(a) );
    };                                                                                               

    message = new MessageHandler("teapot", "alerts")
    return message.request().then(process);
  }

  // Modify the alerts based on the response from Deliverance.
  // (But for the time being let's not, and say we did.)
  pollDeliverance(alerts) {
    return alerts;
  }

}

A few notes

• filteredAlerts can do whatever you like, so long as it returns an array of results
• pollDeliverance can also do whatever you like - if it needs to call another async method, remember to return a promise which resolves to an array of alerts - perhaps updated from the result of the async call.

---

I have created a JSFiddle which demonstrates this - using a simple getJSON call to replicate the async nature of some of this. As I mentioned, it is convoluted, but demonstrates the process:

Live example: https://jsfiddle.net/q1r6pmda/1/

Answer 2

I am not sure if I understood your problem fully, but I will try to give you an generic solution to chaining promises one after another.

someAsyncFunction().then(dataFromAsync1 => {
    return anotherAsyncFunction(dataFromAsync1).then(dataFromAsync2 => {
        return doSomethingWithData(dataFromAsync1, dataFromAsync2);
    });
});