Bluebird Promise Cancellation

by Retsam19

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.6/bluebird.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js"></script>
<pre id="out">
  
</pre>

CSS

#out {
  min-height: 200px;
  background-color: black;
  color: white;
}

Babel + JSX

Promise.config({cancellation: true});

const getPromise = _.memoize((promiseName) => {
	const promise =  new Promise((resolve, __, onCancel) => {
  	setTimeout(resolve, 1000);
    onCancel(() => log(`${promiseName} has been cancelled`));
  });
  
  //promise.then(_.noop) //Uncomment this line to see the change
  return promise;
});

const p1Consumer1 =  getPromise("p1").then(x => log("Promise 1 - Consumer 1"));
const p1Consumer2 =  getPromise("p1").then(x => log("Promise 1 - Consumer 2"));

p1Consumer1.cancel();
//p1 isn't cancelled yet
p1Consumer2.cancel();
//now p1 is cancelled

const p2Consumer1 = getPromise("p2").then(x => log("Promise 2 - Consumer 1"));
p2Consumer1.cancel(); //now p2 is canceled

//HERE'S THE PROBLEM.
//Oops, p2 is already cancelled, this never resolves.  
//(Throws a "late cancellation observer" error)
const p2Consumer2 = getPromise("p2").then(x => log("Promise 2 - Consumer 2"));

//LOG UTILITY
function logItem(text) {
  const outEl = document.getElementById("out");
	const line = document.createElement("div");
  line.classList.add("out-line");
  const outText = (typeof text === "object") ? JSON.stringify(text) : text;
  line.textContent = `> ${outText}`;
	outEl.appendChild(line)
}

function log(...items) {
    items.forEach(logItem);
}