To fetch or not to fetch? That should be an option.
Bernard Baker
Posted on March 22, 2020
Here's a use case which is part of many UX designs.
Use case: Cancel a download.
Use case description: The title of this use case is simply an analogy for a process which uses fetch and a process which can be cancelled using the AbortController.
Let us define the abort controller
The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired. You can create a new AbortController object using the AbortController. ... Communicating with a DOM request is done using an AbortSignal object.
And a code example which can be copied into the console and executed.
// declare the variables and a dummy URI
let controller, signal, url = "https://raw.githubusercontent.com/BuzzFeedNews/nics-firearm-background-checks/master/data/nics-firearm-background-checks.csv";
// initialise the abort controller and store a signal
controller = new AbortController();
signal = controller.signal;
// a form upload function
const download = async () => {
let data, response;
try {
data = await fetch(url, {signal});
response = await data.text();
console.log(response);
} catch(e) {
console.log(e);
}
}
setTimeout( () => {
controller.abort();
}, 500);
download();
So there you have it. Downloads can now be cancelled π¦
Posted on March 22, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.