JS | Promise

by Zoltan Boros

HTML

<pre id="output"></pre>

JavaScript

/* dummy.json
{"field1":"value1"}
*/

let out;
const initialMillis = getCurrentMillis();

function getCurrentMillis() {
	return (new Date()).getTime();
}

function getElapsedTime() {
	return getCurrentMillis() - initialMillis;
}

function log(text) {
	out.textContent += `[${getElapsedTime()}] ${text}\n`;
}

const setup = () => {
	out = document.getElementById('output');
  log('creating promise');
  const promise = new Promise((resolve, reject) => {
  	log('executing promise');
    const readyStateChangeHandler = (event) => {
    	log(`ready state changed: ${event.target.readyState}`);
    };
    const errorHandler = (event) => {
    	log('error encountered');
      reject(new Error('failed'));
    };
    const abortHandler = (event) => {
    	log('aborted');
      reject(new Error('aborted'));
    };
    const timeoutHandler= (event) => {
    	log('timed out');
      reject(new Error('timed out'));
    };
    const loadHandler = (event) => {
    	log('loaded');
      resolve('loaded')
    };
    const loadendHandler = (event) => {
    	log('completed (either successfully or unsuccessfully)');
    };
    const progressHandler = (event) => {
    	if (event.lengthComputable) {
      	log('progress: ' + (event.loaded / event.total * 100) + '%');
      } else {
      	log('progressing (status unknown)');
      }
    };
    const xhttp = new XMLHttpRequest();
    xhttp.addEventListener('readystatechange', readyStateChangeHandler);
    xhttp.addEventListener('error', errorHandler);
    xhttp.addEventListener('abort', abortHandler);
    xhttp.addEventListener('timeout', timeoutHandler);
    xhttp.addEventListener('load', loadHandler);
    xhttp.addEventListener('loadend', loadendHandler);
    xhttp.addEventListener('progress', progressHandler);
    xhttp.open('GET', 'dummy.json')
    log('setting up timer 1');
    setTimeout(() => {
    	log('timer 1 expired, sending request');
      xhttp.send();
    }, 2000);
  });
  log('setting up timer 2');
  setTimeout(() => {
 ...