JSFiddle - React, Tailwind, and code Playground
HTML
Cancelable HTML5 Fetch request using Stream API. View console / network tab.
JavaScript
var fetch = (function() {
var fetch = window.fetch;
var cancelableFetch = function() {
var reader;
var cancelled = false;
var request = fetch.apply(this, arguments).then(function(response) {
reader = response.body.getReader();
if (cancelled) {
// abort stream
reader.cancel();
return null;
}
var body = '';
var decoder = new TextDecoder();
function readStream() {
return reader.read().then(function(result) {
if (cancelled) {
return null;
}
body += decoder.decode(result.value || new Uint8Array, {
stream: !result.done
});
if (cancelled) {
return null;
}
if (result.done) {
return body;
}
return readStream();
})
}
return readStream();
});
var cancel = function() {
if (cancelled) {
return;
}
cancelled = true;
console.warn('Fetch aborted');
if (!reader) {
return;
}
// abort stream
reader.cancel();
};
return {
then: function(resolve) { return request.then(resolve); },
cancel: cancel
};
};
return cancelableFetch;
})();
// reqular fetch request
var request = fetch('https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js');
// regular processing of result
request.then(function(body) {
console.log("Fetch complete:", (typeof body === 'string') ? body.length : body);
}).catch(function(err) {
console.log(err.message);
});
// cancel request
request.cancel();