Back
Close

JavaScript promises, mastering the asynchronous

Magus
37.9K views

How can the Promise class help us? First off, everyone uses it because it is now the standard way to deal with asynchronous code... so we have to use it. Following the standard is always the best thing to do. Now that we know that, here is a simple example of how to use a promise.

First promise example
var promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('hello world');
}, 2000);
});
promise.then(function(data) {
console.log(data);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

As you shown above, you can use the resolve function to fullfil the promise. The then function binds a callback to the promise and you can use the data given to the resolve function.

You can bind multiples callbacks:

Multiple callbacks
var promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('hello world');
}, 2000);
});
promise.then(function(data) {
console.log(data + ' 1');
});
promise.then(function(data) {
console.log(data + ' 2');
});
promise.then(function(data) {
console.log(data + ' 3');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The reject function is used to trigger an error. When you use then, you can give 2 functions. The first function is used when the promise exits successfully. The second function is used when the promise encounters an error.

When an error happens
var promise = new Promise(function(resolve, reject) {
setTimeout(function() {
reject('We are all going to die');
}, 2000);
});
promise.then(function success(data) {
console.log(data);
}, function error(data) {
console.error(data);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You can still bind multiple then methods:

When an error happens with multiple callbacks
var promise = new Promise(function(resolve, reject) {
setTimeout(function() {
reject('We are all going to die');
}, 2000);
});
promise.then(function success(data) {
console.log(data + ' 1');
}, function error(data) {
console.error(data + ' 1');
});
promise.then(function success(data) {
console.log(data + ' 2');
}, function error(data) {
console.error(data + ' 2');
});
promise.then(function success(data) {
console.log(data + ' 3');
}, function error(data) {
console.error(data + ' 3');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You can call resolve and reject multiple times, but this is useless. Once a promise is finished, it can't restart.

Calling resolve multiple times
var promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('hello world 1');
resolve('hello world 2');
resolve('hello world 3');
resolve('hello world 4');
}, 1000);
});
promise.then(function success(data) {
console.log(data);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Create your playground on Tech.io
This playground was created on Tech.io, our hands-on, knowledge-sharing platform for developers.
Go to tech.io
codingame x discord
Join the CodinGame community on Discord to chat about puzzle contributions, challenges, streams, blog articles - all that good stuff!
JOIN US ON DISCORD
Online Participants