Introduction
Callbacks are functions that run after something happens or something completes. If you have to make an asynchronous request, it can either be successful or result in failure. These two possibilities in Promises are denoted by resolves
or rejects
parameters.
Promises help us avoid what's commonly referred to as "callback hell", wherein cascading callbacks create a pyramid shape and impossible to decipher code that's hard to scale. Promises allow us to easily chain callbacks in an intuitive way, by chaining then
and using catch
for errors. Promises helps to break up callbacks into methods with semantic naming.
A Simple Promise
const promise = new Promise(function (resolve, reject) {
const a = 'apples';
const b = 'apples';
if (a === b) {
resolve();
} else {
reject();
}
});
promise
.then(function () {
console.log('success');
})
.catch(function () {
console.log('error');
});
// output => 'success'
Concepts to Know
- Deferred objects are works that are not yet completed
- Promise properties are placeholders. Initially, this value is unknown.
- Each deferred has a promise which acts as a placeholder for the future result.
Support
All modern browsers support Promises, except for Internet Explorer 11 and previous versions.
API Request Example with Promises
Let's pretend that we have a website with multiple accounts created for people's pets. Below, we create a promise to request a made up api server a specified number of pets' user accounts. If the statusCode associated with the request is 200, that indicates that the request was successful, and that we should call resolves
to utilize JSON.parse
to parse the results. If we do not receive a 200 statusCode back, rejects
is called, showing the user the failing statusCode.
// creating the request
const getPets = (number) => {
new Promise((resolves, rejects) => {
const request = new XMLHttpRequest();
request.open("GET", `https://api.examplepet.com/?results=${number}`);
request.onload = () => {
if (request.status === 200) {
resolves(JSON.parse(request.response).results);
} else {
rejects(Error(request.statusText));
}
request.onerror = (error) => rejects(error);
request.send();
};
});
};
// invoking the request
getPets(20)
.then((pets) => console.log(pets))
.catch((error) => console.error(error));
Promise Method: done()
Normally, when chaining method calls with Promises, you can risk discarding errors without seeing them:
function promisesExampleFunction() {
asyncFunc()
.then(function1)
.catch(response1)
.then(function2);
}
If the last .then(function2);
line elicits a rejection, it is never handled. We can account for this using done()
like so:
function promisesExampleFunction() {
asyncFunc()
.then(function1)
.catch(response1)
.done(function2);
}
In the example above, done()
can actually replace the last .then(function2);
, or it can be interchangeably added after the last .then(function2)
with done()
receiving no arguments.
Promise Method finally()
finally()
is great for performing actions regardless of whether an error occurs. It is most frequently used as a clean up method after the last then()
or done()
call. This can be done during page loads to show and hide the spinner, regardless of whether the above functions were successful or not - you'll want to stop the spinner if processing is no longer occurring:
spinnerShow();
fetchData()
.then((data) => renderPage(data))
.catch(error)
.finally(spinnerHide);
Promisify
Promisify is an easy way to convert callback functions to a function that returns Promises. Below, we convert a callback-based function called func
to return native Promises.
const promisify = require("es6-promisify");
const fs = require("fs");
const promisifiedFunc = promisify(fs.func);
promisifiedFunc("oranges.txt").then(function (fruit) {
console.log("Fruit received:", fruit);
}).catch(function (error) {
console.error(error);
});
Conclusion
Promises after they're called upon eventually either resolve
or reject
, returning a response based on what the Promise object specifies. By chaining then
and using catch
for errors, we can perform asynchronous functions in an intuitive way and avoid "callback hell". Promises can handle multiple async operations seamlessly, while at the same time providing superior error handling than would be possible with simple callback chaining.
Top comments (0)