All original content is created in Ukrainian. Not all content has been translated yet. Some posts may only be available in Ukrainian.Learn more

What is a Promise in JavaScript and how to quickly understand its essence?

Post cover: What is a Promise in JavaScript and how to quickly understand its essence?
Table of contentsClick link to navigate to the desired location
This content has been automatically translated from Ukrainian.
Imagine that you ordered coffee at a café. The barista takes the order, gives you a receipt, and says, “Please wait a moment.” You don’t stand still; you can go sit at a table, check your phone, or respond to messages. When the coffee is ready, the barista calls you – and you get the result.
Promise in JavaScript works the same way:
  1. You make a request (for example, to a server) and receive a promise that the response will come later.
  2. JavaScript does not stop executing code – it continues to perform other tasks.
  3. When the result is ready, the Promise notifies you, and you can handle it.

A Simple Example of Promise

function makeCoffee() {
  return new Promise((resolve) => {
    console.log("Order received...");
    setTimeout(() => {
      resolve("☕ Ready! Here is your coffee.");
    }, 2000);
  });
}

console.log("I am scrolling through my phone...");
makeCoffee().then((message) => console.log(message));
First, console.log("I am scrolling through my phone...") will execute because the promise does not block the code.
Then, after 2 seconds, "☕ Ready! Here is your coffee." will appear when the promise is fulfilled.
promise_example_1.png
If something goes wrong (for example, if the coffee runs out), we can add .catch():
function makeCoffee() {
  return new Promise((resolve, reject) => {
    const coffeeReady = Math.random() > 0.5; // random success or failure

    console.log("Order received...");
    setTimeout(() => {
      if (coffeeReady) {
        resolve("☕ Ready! Here is your coffee.");
      } else {
        reject("❌ Sorry, the coffee has run out.");
      }
    }, 2000);
  });
}

makeCoffee()
  .then((message) => console.log(message))
  .catch((error) => console.log(error));
This is like real life: if there is no coffee, the barista apologizes, and you receive an error response.
promise_example_2.png

How to Quickly Understand?

Try writing promises on your own: create a function that waits 3 seconds before responding, or one that randomly fails. This way, you can quickly understand how asynchronous code works.
But before you start experimenting with promises, you need to understand the structure (resolve, reject, catch, etc.). There is a separate post on this.

This post doesn't have any additions from the author yet.

What is the difference between spec_helper.rb and rails_helper.rb in RSpec?
08 Dec 13:53

What is the difference between spec_helper.rb and rails_helper.rb in RSpec?

meme code
meme code@memecode
09 Dec 14:50

[Fix] No such file or directory @ rb_sysopen - tmp/pids/server.pid

meme code
meme code@memecode
What you need to know to build a successful freelance career in IT
23 Dec 16:03

What you need to know to build a successful freelance career in IT

meme code
meme code@memecode
Virtual cloud server: what it is and what makes it special
03 Jan 10:58

Virtual cloud server: what it is and what makes it special

meme code
meme code@memecode
[Fix] Heroku / SearchBox addon - indexing error "The client is unable to verify that the server is Elasticsearch"
31 Jan 13:09

[Fix] Heroku / SearchBox addon - indexing error "The client is unable to verify that the server is Elasticsearch"

meme code
meme code@memecode
06 Feb 15:31

Fix error [DEPRECATION] #adapters is deprecated. Use #profiles instead. (Codecov / docile)

meme code
meme code@memecode
The structure of Promise (JavaScript) and how to work with it
18 Feb 14:33

The structure of Promise (JavaScript) and how to work with it

meme code
meme code@memecode
What is Memoization (examples in Ruby and Ruby on Rails)?
20 Feb 18:16

What is Memoization (examples in Ruby and Ruby on Rails)?

meme code
meme code@memecode
What is debounce in JavaScript and why is it important?
21 Mar 16:39

What is debounce in JavaScript and why is it important?

meme code
meme code@memecode
What is CFB (Cipher Feedback)?
21 Mar 16:53

What is CFB (Cipher Feedback)?

meme code
meme code@memecode
What is XOR and how does it work?
21 Mar 17:05

What is XOR and how does it work?

meme code
meme code@memecode
Embedded programming: what it is and how to get started
24 Mar 16:48

Embedded programming: what it is and how to get started

meme code
meme code@memecode