Catching success with then

Learn to capture the successful result with then.

Catching the result with then

To receive the result when a promise fulfils, you call the then method. then takes a function and passes the resolved value into it.

const order = new Promise(resolve => resolve('shipped'));
order.then(status => {
  console.log(status);
});

then itself returns a new promise, which lets you chain calls. Unlike callbacks, it runs automatically when the result is ready.

Chaining

Because each then returns a new promise, you can process results in sequence. The value a then returns is passed to the next then.

fetchOrder()
  .then(order => order.id)
  .then(id => console.log(id));

This chain replaces nested callbacks and keeps the code readable top to bottom. Each step passes data to the next.

Exercise Log the name with two then calls

A function called loadUser returns a promise that resolves to a user object. Call loadUser; in the first then return the user's name property; in the second then log that name with console.log.

Show example solution

loadUser()
  .then(user => user.name)
  .then(name => console.log(name));

Test yourself

What does the then method return?
- The resolved value
- undefined
- A new promise
- The original promise
Show answer

A new promise — Correct! then always returns a new promise.

The second link of the chain

fetchOrder()
  .then(order => order.id)
  .____(id => console.log(id));

Show answer

fetchOrder()
  .then(order => order.id)
  .then(id => console.log(id));

Match then concepts

then

Catches the success
return value

Passed to next then
chaining

Orders then calls

Next lesson: Catching errors with catch

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies