What causes an undefined outcome when a promise is fulfilled?

Question

What causes an undefined outcome when a promise is fulfilled?

Could you help me understand something?

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if(true) {
      resolve('success')
    } else {
      reject('failure')
    }
  }, 4000)
})

promise1.then(result => console.log(result))

Why do I see 'success' in the console followed by:

Promise {<fulfilled>: undefined}

Why is there undefined when my promise should return a string value of 'success'? Is this due to nested setTimeout? How can I correct this issue?

javascript asynchronous promise undefined

Answer 1

Answer №1

By making the following adjustments:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    const stat = true;
    if(stat) {
      resolve('success')
    } else {
      reject('failure')
    }
  }, 4000)
})

promise1.then(
    result => {console.log('resolve', result); return result;},
    result => {console.log('reject', result); return result;}
)

You will see both the log and the promise return value on your dev tools;

WHY?

Undefined is the result of the implicit return value in the callback (return;). When a function doesn't explicitly return anything, the JavaScript engine will add an implicit return statement to the end of the function body.

Answer 2

By making the following adjustments:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    const stat = true;
    if(stat) {
      resolve('success')
    } else {
      reject('failure')
    }
  }, 4000)
})

promise1.then(
    result => {console.log('resolve', result); return result;},
    result => {console.log('reject', result); return result;}
)

You will see both the log and the promise return value on your dev tools;

WHY?

Undefined is the result of the implicit return value in the callback (return;). When a function doesn't explicitly return anything, the JavaScript engine will add an implicit return statement to the end of the function body.

Answer 3

Answer №2

@ Mateusz W

When you see the first log 'success' in your console, that is coming from the 'console.log(result)' statement you wrote.

The second log 'Promise {: undefined}' is related to the '

promise1.then(result => console.log(result))

'. This is because the 'then' function itself returns a promise that resolves with the result you pass into it (in this case, you are not returning anything inside then).

To better understand, consider the following code:

promise1.then(result => console.log(result)).then(result1 => {})

This will produce the output:

success
undefined
Promise {<fulfilled>: undefined}

The 'undefined' after 'success' corresponds to what you saw as 'Promise {: undefined}' and represents result1.

It's important not to mix up the

Promise {<fulfilled>: undefined}

you see here (from my code) with the promise1 constant you defined. The former is the result of chaining a second then to your initial then call.

In summary, it might have been confusing thinking that the

Promise {<fulfilled>: undefined}

in your console referred to your promise1. In reality, it indicates the return value of the then function.

Answer 4

@ Mateusz W

When you see the first log 'success' in your console, that is coming from the 'console.log(result)' statement you wrote.

The second log 'Promise {: undefined}' is related to the '

promise1.then(result => console.log(result))

'. This is because the 'then' function itself returns a promise that resolves with the result you pass into it (in this case, you are not returning anything inside then).

To better understand, consider the following code:

promise1.then(result => console.log(result)).then(result1 => {})

This will produce the output:

success
undefined
Promise {<fulfilled>: undefined}

The 'undefined' after 'success' corresponds to what you saw as 'Promise {: undefined}' and represents result1.

It's important not to mix up the

Promise {<fulfilled>: undefined}

you see here (from my code) with the promise1 constant you defined. The former is the result of chaining a second then to your initial then call.

In summary, it might have been confusing thinking that the

Promise {<fulfilled>: undefined}

in your console referred to your promise1. In reality, it indicates the return value of the then function.

Answer 5

Answer №3

It is important to note that the code snippet provided does not show how the data is being retrieved.

Promise {<fulfilled>: undefined}

However, it is possible that the implementation could resemble the following:

promise1.then(result => {
   console.log(result)
   console.log(promise1); // this statement
})

If you were to modify the code as follows:

promise1.then(result => {
   console.log(result)
   console.log(promise1); 
   return result; // updated line
})

The output will change to:

Promise {<fulfilled>: "succes"}

Answer 6

It is important to note that the code snippet provided does not show how the data is being retrieved.

Promise {<fulfilled>: undefined}

However, it is possible that the implementation could resemble the following:

promise1.then(result => {
   console.log(result)
   console.log(promise1); // this statement
})

If you were to modify the code as follows:

promise1.then(result => {
   console.log(result)
   console.log(promise1); 
   return result; // updated line
})

The output will change to:

Promise {<fulfilled>: "succes"}

What causes an undefined outcome when a promise is fulfilled?

Answer №1

Answer №2

Answer №3

Similar questions

jQuery is successfully manipulating pagination on CodeIgniter, however, the link is being updated as well

Error: Attempting to access a property named '_updatedFibers' on an undefined object is not possible due to a TypeError

In what situations should the `#` symbol be used to select a DOM element?

In order to display the particle-slider logo effect, the JavaScript on the page needs to be refreshed

The wordpress jquery dependency is failing to respond

Tips on utilizing useStyle with ReactJS Material UI?

Starting a fresh SSH terminal directly from a web browser

Obtain the value from the controller of the amazing-rating component

Incorporate an array into a JSON object using AngularJS

Understanding how flex-wrap property works in flexbox is essential for creating

Show various Bootstrap Alert Messages based on the type of error detected?

Looking to generate an HTML table using JavaScript?

When a specific condition is fulfilled, I must retrieve a random response from a designated array

Tips for testing an API that relies on an external library such as "<script src="http://stripe[...]"

nuxt-auth is experiencing difficulties retrieving token information through the refresh provider

Displaying content using asynchronous JavaScript and XML (AJAX

What's the reason behind the console showing an uncaught promise error message?

Can you merge multiple req.body requests?

Ensuring validity with Vuelidate for customizable fields

Transform every key and value into an array