Angular Training

Session -6
Outlines

Promises

Modules
Promises
function getUsers() {
return [
Why JavaScript promises ?
{ username: 'john', email: '[email protected]' },
{ username: 'jane', email: '[email protected]' },
];
}

function findUser(username) {
const users = getUsers();
const user = users.find((user) =>
user.username === username);
return user;
}

console.log(findUser('john'));
function getUsers() {
let users = [];
setTimeout(() => {
users = [
{ username: 'john', email: '[email protected]' },
{ username: 'jane', email: '[email protected]' },
];
}, 1000);
return users;
}
function findUser(username) {
const users = getUsers(); // A
const user = users.find((user) => user.username === username); // B
return user;
}
console.log(findUser('john'));
Challenge
The challenge is how to access the users returned from the getUsers() function after
one second. One classical approach is to use the callback.

Using callbacks to deal with an asynchronous operation

function getUsers(callback) {
setTimeout(() => {
callback([
{ username: 'john', email: '[email protected]' },
{ username: 'jane', email: '[email protected]' },
]);
}, 1000);
}
function findUser(username, callback) {
getUsers((users) => {
const user = users.find((user) => user.username === username);
callback(user);
});
}
findUser('john', console.log);
The callback approach works very well. However, it makes the code more
difficult to follow. Also, it adds complexity to the functions with callback
arguments.

If the number of functions grows, you may end up with the callback hell
problem. To resolve this, JavaScript comes up with the concept of promises.
Promises
By definition, a promise is an object that encapsulates the result of an asynchronous
operation.

A promise object has a state that can be one of the following:

•Pending
•Fulfilled with a value
•Rejected for a reason
Creating a promise
To create a promise object, you use the Promise() constructor:

const promise = new Promise((resolve, reject) => {

// contain an operation
// ...

// return the state

if (success) {
resolve(value);
} else {
reject(error);
}
});
The promise constructor accepts a callback function that typically performs an
asynchronous operation. This function is often referred to as an executor.

The executor accepts two callback functions with the name resolve and reject.

If the asynchronous operation completes successfully, the executor will call the
resolve() function to change the state of the promise from pending to fulfilled with
a value.

In case of an error, the executor will call the reject() function to change the state of
the promise from pending to rejected with the error reason.

Once a promise reaches either fulfilled or rejected state, it stays in that state
and can’t go to another state.
Once a new Promise object is created, its state is pending. If a promise reaches
fulfilled or rejected state, it is resolved.
Consuming a Promise: then, catch, finally

1) The then() method

To get the value of a promise when it’s fulfilled, you call the then() method of the
promise object.

Syntax :

promise.then(onFulfilled ,onRejected);

The then() method calls the onFulfilled() with a value, if the promise is fulfilled or
the onRejected() with an error if the promise is rejected.

Note that both onFulfilled and onRejected arguments are optional.

function getUsers() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([
{ username: 'john', email: '[email protected]' },
{ username: 'jane', email: '[email protected]' },
]);
}, 1000);
});
}
function onFulfilled(users) {
console.log(users);
}
const promise = getUsers();
promise.then(onFulfilled);
function getUsers() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([
{ username: 'john', email: '[email protected]' },
{ username: 'jane', email: '[email protected]' },
]);
}, 1000);
});
}

const promise = getUsers();

promise.then((users) => {
console.log(users);
});
let success = true;
function getUsers() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (success) {
resolve([
{ username: 'john', email: '[email protected]' },
{ username: 'jane', email: '[email protected]' },
]);
} else {
reject('Failed to the user list');
}
}, 1000);
});
}
function onFulfilled(users) {
console.log(users);
}
function onRejected(error) {
console.log(error);
}
const promise = getUsers();
promise.then(onFulfilled, onRejected);
2) The catch() method let success = false;
function getUsers() {
return new Promise((resolve, reject) => {
setTimeout(() => {
promise.catch(onRejected);
if (success) {
resolve([
{ username: 'john', email: '[email protected]' },
{ username: 'jane', email: '[email protected]' },
]);
} else {
reject('Failed to the user list');
}
}, 1000);
});
}
const promise = getUsers();
promise.catch((error) => {
console.log(error);
});
3) The finally() method

const render = () => {

//...
};

getUsers()
.then((users) => {
console.log(users);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
render();
});
A practical JavaScript Promise example
Promise Chaining
Sometimes, you want to execute two or more related asynchronous operations,
where the next operation starts with the result from the previous step.
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(10);
}, 3 * 100);
});

p.then((result) => {
console.log(result); // 10
return result * 2;
}).then((result) => {
console.log(result); // 20
return result * 3;
}).then((result) => {
console.log(result); // 60
return result * 4;
});
Multiple handlers for a promise
When you call the then() method multiple times on a promise, it is not the promise chaining.

let p = new Promise((resolve, reject) => {

setTimeout(() => {
resolve(10);
}, 3 * 100);
});
p.then((result) => {
console.log(result); // 10
return result * 2;
})
p.then((result) => {
console.log(result); // 10
return result * 3;
})