3 Tips and Tricks with Promises
These are some small tricks I found usefull working as a web developer, they all involve the usage of Promises.
1 Wrap a XHR request in a promise
Sometimes can be handy to just leverage a promise instead of the callbacks that a json request might trigger. Here is a snnipet to dot that:
function getJSONPromise(url) {
return new Promise(function(resolve, reject) {
const xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET', url, true);
xhr.timeout = 2000;
xhr.onload = function() {
try {
resolve(JSON.parse(xhr.responseText));
} catch (e) {
error('Caught in _loadJSON() ', e);
reject();
}
};
// to handle networking errors
xhr.onerror = reject;
xhr.ontimeout = reject;
xhr.onabort = reject
xhr.send();
});
}
2 Race against a timeout
Sometimes you expect that a promise will never resolve, this will help to deal with that.
const timeoutPromise = new Promise((resolve, reject) => window.setTimeout(reject, 10000));
const anotherPromise = //...
Promise.race([timeoutPromise, anotherPromise]).then( //...
3 Ensure an element is rendered through requestAnimationFrame
Swizec Teller shows in his blog how we can use requestAnimationFrame
, we can leverage this pattern through a Promise:
function getElementRenderedPromise(domElement) {
return new Promise(resolve => {
const check = function() {
if (!domElement.offsetWidth) {
window.requestAnimationFrame(check);
} else {
resolve();
}
}
check();
});
}