I have a function in a service called accountManager that returns a promise seen below:

The .then() on this promise fires and prints out the response like intended.

  signIn(email:String,password:String):Promise<any>{
    return this.http.post('http://localhost:3000/api/signin',JSON.stringify({
      "email": email,
      "password": password
    }),{headers: this.headers})
      .toPromise()
      .then(res => {
      //**This is defined**
        console.log(res);
      })
  }

The issue arises when I am in another class that uses this signIn method. The response inside the promise is now null. When I omit the promise from the function itself the returned promise's .then() has a value for the response.

if (this.loginForm.valid === true){
  this.accountManager.signIn(this.email,this.password)
    .then(response =>{

    //**This .then has an undefined response when added on to the promise returned from the signIn function.**

      let body = JSON.parse(response._body)

      if (body.payload.success === true){
        this.router.navigate(['/']);
      }else{
        this.signInError = true;
      }
  })
    .catch(error=>{
      this.signInError = true;
    })

Does anyone know why the promise .then() contains a value when the promise is being returned but the promise that is given by the return does not have a value in it's .then()? I would be happy to clarify if anything is confusing. Thanks :)

I have a function in a service called accountManager that returns a promise seen below:

The .then() on this promise fires and prints out the response like intended.

  signIn(email:String,password:String):Promise<any>{
    return this.http.post('http://localhost:3000/api/signin',JSON.stringify({
      "email": email,
      "password": password
    }),{headers: this.headers})
      .toPromise()
      .then(res => {
      //**This is defined**
        console.log(res);
      })
  }

The issue arises when I am in another class that uses this signIn method. The response inside the promise is now null. When I omit the promise from the function itself the returned promise's .then() has a value for the response.

if (this.loginForm.valid === true){
  this.accountManager.signIn(this.email,this.password)
    .then(response =>{

    //**This .then has an undefined response when added on to the promise returned from the signIn function.**

      let body = JSON.parse(response._body)

      if (body.payload.success === true){
        this.router.navigate(['/']);
      }else{
        this.signInError = true;
      }
  })
    .catch(error=>{
      this.signInError = true;
    })

Does anyone know why the promise .then() contains a value when the promise is being returned but the promise that is given by the return does not have a value in it's .then()? I would be happy to clarify if anything is confusing. Thanks :)

• javascript
• angular
• typescript
• promise
• rxjs

• 9 You're not returning res after the console.log call. – cartant Commented Jun 12, 2017 at 4:23
• But I cant return it because I am already returning the function right? – random0620 Commented Jun 12, 2017 at 4:30
• no, that's not right. returning in a .then callback has nothing to do with returning in the enclosing function - return returns from the current function – Jaromanda X Commented Jun 12, 2017 at 4:31
• your question title is misleading - both .then are being called, otherwise you wouldn't know that response is undefined in the second .then – Jaromanda X Commented Jun 12, 2017 at 4:32
• Thanks for the help! – random0620 Commented Jun 12, 2017 at 4:32

1 Answer 1

As @cartant said, you're not returning res after the console.log call. The value returned from the promise callback resolves the promise.

new Promise(function(resolve) {
    // this is almost equivalent 
    // to returning in promise callbacks
    resolve(3);
})
.then(function(res) {
   console.log(res); // logs 3  
   return 7;
})
.then(function(res) {
   console.log(res); // logs 7
   // no return, implicitly returns undefined
})
.then(function(res) {
   console.log(res); // logs `undefined`
});

A returned value can also be another promise, in that the consequent .then callback will be listening for that promise to resolve:

new Promise(function(resolve) {
    // this is almost equivalent 
    // to returning in promise callbacks
    resolve(3);
})
.then(function(res) {
   return Promise.resolve(5);  // can create a Promise which resolves immediately
})
.then(function(res) {
   console.log(res); // logs 5
});