What are promises in JavaScript?

Promises are one of the most important features of JavaScript, and they're used all over the place in modern applications. But what are they, exactly?

Essentially, a promise is an object that represents the result of an asynchronous operation. It's like a hypothetical result that you don't know the actual value of yet. For example, when you make a request to a web server, the server might take a few seconds to respond. During that time, the JavaScript engine will create a promise object to represent the request.

Once the web server responds, the JavaScript engine will then resolve the promise object with the actual value. This can be a string, number, object, or even another promise. If something goes wrong and the request can't be completed the JavaScript engine will reject the promise object with an error.

There are a few different ways to work with promises. The most common is to use the then() and catch() methods. The then() method takes two arguments:

  • a callback function that will be executed when the promise is resolved
  • and a callback function that will be executed when the promise is rejected.

For example, consider the following code:

var request = new XMLHttpRequest(); 
request.onload = function() { 
    console.log(request.responseText); 
}; 

request.open('GET', 'https://www.google.com'); 
request.send();

This code makes a request to the Google website and logs the response text to the console. However, the code won't actually log anything to the console until the request has completed.

We can use a promise to make the code more asynchronous. The code below makes the same request as before, but uses a promise to handle the asynchronous nature of the operation.

var request = new XMLHttpRequest(); 
request.onload = function() { 
    console.log(request.responseText); 
}; 

request.open('GET', 'https://www.google.com'); 
request.send(); 

var promise = new Promise((resolve, reject) => { 
    request.onload = resolve; request.onerror = reject; 
}); 

promise.then(console.log, console.error);

In this code, we create a new promise object and specify a function to handle the resolution and rejection of the promise. We then call the then() method on the promise, which takes two arguments: a callback function to handle the successful resolution of the promise, and a callback function to handle the unsuccessful resolution of the promise.

We can also use the catch() method to handle the unsuccessful resolution of a promise. The code below is equivalent to the code above.

var request = new XMLHttpRequest(); 
request.onload = function() { 
    console.log(request.responseText); 
}; 

request.open('GET', 'https://www.google.com'); 
request.send(); 

var promise = new Promise((resolve, reject) => { 
    request.onload = resolve; request.onerror = reject; 
}); 

promise.catch(console.log);

In this code, we call the catch() method on the promise, which takes a single callback function. This function will be executed if the promise is rejected.

Now that we know what promises are, let's take a look at some examples of how to use them.

The code below prints "Hello, World!" to the console.

console.log('Hello, World!');

However, the code above will not print anything to the console. The reason is because the console.log() function is synchronous. It will not execute until the code has finished running. In order to make the code asynchronous, we can use a promise.

console.log('Hello, World!'); 

var promise = new Promise((resolve, reject) => { 
    setTimeout(resolve, 1000); 
}); 

promise.then(console.log);

In this code, we create a new promise object and specify a function to handle the resolution and rejection of the promise. We then call the then() method on the promise, which takes a single callback function. This function will be executed when the promise is resolved.

We use the setTimeout() function to delay the resolution of the promise by 1,000 milliseconds. This will cause the console.log() function to execute after 1,000 milliseconds.

💡
Need a writer? Want to work with me? I have a subscription copywriting service available at Zipply.io. Subscribe to a set number of words and split it into as many copy assets as you need. Scale your startup, small business, or MVP. Upgrade, downgrade and pause at any time. Start your subscription here.