I can't work out what I am doing wrong with my Angular 2 code. My promise does not return the correct result.

My code looks like this:

  this.addPlan('My plan title9', "YES9")
  .then((id)=>{
      console.log('Promise return was: ' + id);
    })
  .catch((err)=>{
      console.log('Call to addPlan failed with err = ' + err);
    });

  addPlan(title, security)
  {
    let timeStamp 	= new Date().toISOString();
    let plan 		= {
        _id 		  : 'PLAN:' + timeStamp,
        title 		: title,
        security 	: security,
        notes     : [],         
        flags     : [],         
        created   : timeStamp,
        updated 	: timeStamp
      };

    return new Promise(resolve =>
    {
      var theID;
      this._DB.put(plan)
      .then(function (response) {
        console.log(JSON.stringify(response));
        resolve(response.id);
        theID = response.id;
      })
      .catch((err) =>
      {
        console.log('addPlan error is: ' + err);
        this.success = false;
      });

      if(this.success)
      {
        this.handleSyncing();
        resolve(theID);
      }

    });
  }

I can't work out what I am doing wrong with my Angular 2 code. My promise does not return the correct result.

My code looks like this:

  this.addPlan('My plan title9', "YES9")
  .then((id)=>{
      console.log('Promise return was: ' + id);
    })
  .catch((err)=>{
      console.log('Call to addPlan failed with err = ' + err);
    });

  addPlan(title, security)
  {
    let timeStamp 	= new Date().toISOString();
    let plan 		= {
        _id 		  : 'PLAN:' + timeStamp,
        title 		: title,
        security 	: security,
        notes     : [],         
        flags     : [],         
        created   : timeStamp,
        updated 	: timeStamp
      };

    return new Promise(resolve =>
    {
      var theID;
      this._DB.put(plan)
      .then(function (response) {
        console.log(JSON.stringify(response));
        resolve(response.id);
        theID = response.id;
      })
      .catch((err) =>
      {
        console.log('addPlan error is: ' + err);
        this.success = false;
      });

      if(this.success)
      {
        this.handleSyncing();
        resolve(theID);
      }

    });
  }

When this.addPlan(...) is called the server log is:

Promise return was: undefined 
{"ok":true,"id":"PLAN:2017-01-09T18:16:50.094Z","rev":"1-ac45a4785982fcbbcb46dd099431ecb6"}

The return from the promise is undefined when it should be the value of 'id'. Also the console shows the Promise message first but I would have expected it to appear after the promise has returned.

Clearly I am making a newbie error here but I can't see what it is.

• javascript
• angular
• promise

Share Improve this question Follow asked Jan 9, 2017 at 18:21 Bill NobleBill Noble 6,7442020 gold badges7777 silver badges136136 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The error is the if(this.success) because you're treating the asynchronous code as if it were synchronous. Everything inside the block of the new promise you create will be run synchronously.

Looking at the output, it should be fairly straight forward to understand what happens:

1. The if will evaluate to true and resolve the not yet defined value.
2. The put() function call pletes and logs the response to the console.

You are also implementing the deferred anti-pattern. There is no need to create a new promise as the put() function already returns one. Simply return that one and return the response from within the .then() which will wrap it in a promise and resolve it. I omitted the this.handleSyncing(); in the code below since it's not entirely clear what that does.

function addPlan(title, security) {
  let timeStamp = new Date().toISOString();
  let plan = {
    _id: 'PLAN:' + timeStamp,
    title: title,
    security: security,
    notes: [],         
    flags: [],         
    created: timeStamp,
    updated: timeStamp
  };

  return this._DB.put(plan)
    .then((response) => {
      console.log(JSON.stringify(response));
      return response.id;
    //^^^^^^----- This will wrap the response.id in a promise and will be the resolved value 
    })
    .catch((err) => {
      console.log('addPlan error is: ' + err);
      this.success = false;
    });  
}

You don't have to create a new Promise

you can just return "this._DB.put(plan)" promise:

addPlan(title, security){
    let timeStamp   = new Date().toISOString();
    let plan        = {
        _id           : 'PLAN:' + timeStamp,
        title       : title,
        security    : security,
        notes     : [],         
        flags     : [],         
        created   : timeStamp,
        updated     : timeStamp
      };
    return this._DB.put(plan).then(response => {
        return response.id
    })
  }

and response on then() will equal to id:

 this.addPlan('My plan title9', "YES9").then((id)=>{
      console.log('Promise return was: ' + id);
    })