JavaScript promises, mastering the asynchronous

Magus
10.6K views

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

How can the Promise class can 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
1
2
3
4
5
6
7
8
9
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
1
2
3
4
5
6
7
8
9
10
11
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
1
2
3
4
5
6
7
8
9
10
11
12
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
Open Source Your Knowledge: become a Contributor and help others learn. Create New Content