Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Second .then() on promise is getting called with data as undefined

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 :)

like image 568
s_kirkiles Avatar asked Jun 12 '17 04:06

s_kirkiles


People also ask

What is then method in Promise?

The then method returns a Promise which allows for method chaining. If the function passed as handler to then returns a Promise , an equivalent Promise will be exposed to the subsequent then in the method chain.

What are the 3 states of a JavaScript Promise?

A Promise is in one of these states: pending: initial state, neither fulfilled nor rejected. fulfilled: meaning that the operation was completed successfully. rejected: meaning that the operation failed.

Does Promise run without then?

The code inside the Promise constructor runs when the promise is created and it runs synchronously which surprises some people. So even without then() everything still runs.

How do I return an empty Promise?

To return an empty promise with JavaScript, we can use an async function or call Promise. resolve . to create 2 functions that returns empty promises. p1 is an async function, so it's a function that always returns a promise.


1 Answers

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
});
like image 111
Max Koretskyi Avatar answered Sep 29 '22 19:09

Max Koretskyi