When using the asynchronous callback in e.g. file API in node or native functions with callbacks in cordova, you get code with really a lot of nested function definitions and argument lists that expand over many lines, making it quite hard to read.
Example: Get a file via HTTP and write it to a local file in cordova taken from https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
console.log('fileEntry is file? ' + fileEntry.isFile.toString());
var oReq = new XMLHttpRequest();
// Make sure you add the domain name to the Content-Security-Policy <meta> element.
oReq.open("GET", "http://cordova.apache.org/static/img/cordova_bot.png", true);
// Define how you want the XHR data to come back
oReq.responseType = "blob";
oReq.onload = function (oEvent) {
var blob = oReq.response; // Note: not oReq.responseText
if (blob) {
// Create a URL based on the blob, and set an <img> tag's src to it.
var url = window.URL.createObjectURL(blob);
document.getElementById('bot-img').src = url;
// Or read the data with a FileReader
var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result contains the contents of blob as text
// this could in fact contain even more function definitions
});
reader.readAsText(blob);
} else console.error('we didnt get an XHR response!');
};
oReq.send(null);
}, function (err) { console.error('error getting file! ' + err); });
}, function (err) { console.error('error getting persistent fs! ' + err); });
These are 4 nested function definitions. And, even harder to read - how to detect which error handler belongs to which function call.
Doe anyone know a clearer way to write this? Are there any best practice patterns?
