javascriptember.jsember-datarsvp-promise

Having nested promises and returning them in route won't update the route model and the template using that model


in my route model i need to send two requests (previous and latest) and on the response i grab their ids to send two other requests(baslineCpature and currentcapture). when i got the responses of both requests, i need to send two other requests(fiberHealthData, wavelengthsPerSectionData). ember model should return (baslineCpature,currentcapture, fiberHealthData, wavelengthsPerSectionData ). one issue i have here is that i want to update my template as soon as i get response for baslineCpature and currentcapture.

Here is my code. I appreciate if someone can tell me what i am doing wrong.

model: function (params,transition) {

  var promiseA=null;
  var promiseB=null;
  var promiseA1=null;
  var promiseB1=null;

  promiseA1 = Ember.RSVP.hash({
    latest:this.store.findAll('latest'),
    previous: this.store.findAll('previous'),
  });

  promiseA= promiseA1.then((promiseAResolved) => {
    return Ember.RSVP.hash({
      baselineCapture:self.store.find('capture', promiseAResolved.previous.get('firstObject.id')),
      currentCapture: self.store.find('capture', promiseAResolved.latest.get('firstObject.id')),
    });
  });

  promiseB= promiseA.then((promiseAResolved) => {
    baselineId =  promiseAResolved.baselineCapture.id;
    currentId =  promiseAResolved.currentCapture.id;

    return Ember.RSVP.hash({
      fiberHealthData:self.store.findAll('fiber-health',{ adapterOptions: {current: currentId, baseline: baselineId}}),
      wavelengthsPerSectionData:self.store.findAll('wavelengths-per-section',{ adapterOptions: {current: currentId, baseline: baselineId}} )
    });
  });

//this should be retun of my model
  return Ember.RSVP.hash({
    baselineCapture:promiseA.baselineCapture,
    currentCapture:promiseA.currentCapture,
     fiberHealthData:promiseB.fiberHealthData,
    wavelengthsPerSectionData:promiseB.wavelengthsPerSectionData,
  });
}


Solution

  • Okay, first this is what you should do:

    const {hash} = Ember.RSVP;
    
    return hash({
        latest:this.store.findAll('latest'),
        previous: this.store.findAll('previous'),
    }).then(({latest, previous}) => hash({
        baselineCapture:self.store.find('capture', previous.get('firstObject.id')),
        currentCapture: self.store.find('capture', latest.get('firstObject.id')),
    })).then(({baselineCapture, currentCapture}) => {
        let current = currentCapture.id;
        let baseline = baselineCapture.id;
        return hash({
            currentCapture,
            baselineCapture,
            fiberHealthData:self.store.findAll('fiber-health',{
                adapterOptions: {current, baseline}
            }),
            wavelengthsPerSectionData:self.store.findAll('wavelengths-per-section', {
                adapterOptions: {current, baseline}
            }),
        });
    });
    

    Use the ES6 features like destructing. Its very useful for these use cases!

    You need to understand how promise chaining works! Have you read Promises/A+? It's one of the best specification I've ever read. Read it!

    What you did wrong is using promiseA.baselineCapture. You can't access a promise without resolving it with then.