JSFiddle - React, Tailwind, and code Playground

HTML

<div id="then">
  <p class="title">then(successCB, failureCB)</p>
</div>
<div id="fail">
  <p class="title">fail(failureCB)</p>
</div>

CSS

.title {
  text-align: center;
  text-decoration: underline;
}
#then, #fail {
  float: left;
  display: inline-block;
  margin-right: 10px;
  padding: 20px;
  width: 200px;
  height: 300px;
  background-color: rgb(235,235,255);
}

JavaScript

asyncThatWillFail().then(function () {
	// useless callback
}, function () {
	logThen("error handler");
  return $.Deferred().resolve();
}).then(function () {
	logThen("continue on success chain");
}, function () {
	logThen("continue on error chain");
});

asyncThatWillFail().fail(function () {
	logFail("error handler");
  return $.Deferred().resolve();
}).then(function () {
	logFail("continue on success chain");
}, function () {
	logFail("continue on error chain");
});









/*
* Methods
*/

function logThen (msg) {
	$("#then").append("<p>"+msg+"</p>");
}
function logFail (msg) {
	$("#fail").append("<p>"+msg+"</p>");
}
function asyncThatWillFail () {
	var dfd = $.Deferred();
  setTimeout(function () {
  	dfd.reject();
  }, 1000);
  return dfd.promise();
}