Promise All with Error Handling

The JavaScript code example demonstrates how to program with a promise all and handle errors that might arise.

PromiseAll.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>XoaX.net's JavaScript Workers Demo</title>
  </head>
  <body>
  	<p>Press F12 to see the log results.</p>
  	<script src="PromiseAll.js"></script>
  </body>
</html>

PromiseAll.js

// Three types of promise
const kqPromise1 = Promise.resolve('First result for kqPromise1');
const kqPromise2 = new Promise((qResolve, qReject) =>
	setTimeout(() => {
		// There is a 50/50 chance of an error.
		if (Math.random() > .5) {
			qReject("Something went wrong");
		}
		qResolve('Second result for kqPromise2');
	}, 500));
const kqPromise3 = new Promise((qResolve) => {
	const qFileReader = new FileReader();
	qFileReader.addEventListener("loadend", function(qEvent) {
		qResolve("Third result for kqPromise3: " + qEvent.srcElement.result);
	});
	qFileReader.readAsText(new Blob(["Reading a blob at XoaX.net"], {type : "text/plain"}));
});

Promise.all([kqPromise1, kqPromise2, kqPromise3])
	.then(saResults => {
		// Display the results in the log
		console.log('Results:', saResults);
		// Display the results array in elements
		for(let iIndex in saResults) {
			AddMessageToBody("saResults["+iIndex+"] = " + saResults[iIndex]);
		}
	}).catch(qError => {
		AddMessageToBody("Error: " + qError);
		console.error('Error in one of the promises:', qError);
	});
	
function AddMessageToBody(sMessage) {
	let qBodyElement = document.body;
	let qMessageElement = document.createElement("div");
	qMessageElement.innerHTML = sMessage;
	qBodyElement.appendChild(qMessageElement);
}

Core JavaScript

Promise All with Error Handling

PromiseAll.html

PromiseAll.js

Output