title: How do I create a class that processes two promises and then returns a promise?
body: <p>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.</p>
  
  <p>Because polling happens asynchronously (I'm requesting data from a web service) then I assume that what I actually need to return is a <em>promise</em> which, when fulfilled, will give the correct subset of Alert objects.</p>
  
  <p>But clearly I don't understand how to do this, because the method that is supposed to return the promise returns something else. </p>
  
  <p>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:</p>
  
  <pre><code>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) =&gt; {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) =&gt; {
        json2 = JSON.parse(json);
        return json2.map( (a) =&gt; new Alert(a) );
      };                                                                                               
  
      message = new MessageHandler("teapot", "alerts")
      return message.request().then( (json) =&gt; {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;
    }
  
  }
  </code></pre>
  
  <p><code>message.request()</code> returns a promise from the web service. That works. If I snapshot the <code>process</code> function inside <code>pollTeapot()</code> I get the right data.</p>
  
  <p>But, if I snapshot the return value from <code>filteredAlerts()</code> 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 <code>{ _45: 0, _81: 0, _65: null, _54: null }</code>. </p>
  
  <p>Any pointers would be very much appreciated at this point. (This is in React Native, by the way, if that helps.)</p>