How can I start another request after AbortController.abort()?

Question

I've read about cancelling fetch requests by using AbortController.abort(). Is there a way to start a request again without aborting it after calling this command?

For example, in this demo from MDN, once Cancel download has been clicked, clicking Download video will trigger the fetch again, but immediately abort it.

Is there a way to allow this request again without aborting it? So, in this case, how could you click Download video to begin the download, click Cancel download to cancel the download, and then click Download video again to start the download again? For example, if the user clicked Cancel download on accident...

Answer 1

For example, in this demo from MDN, once Cancel download has been clicked, clicking Download video will trigger the fetch again, but immediately abort it.

They fixed the example. After you click Cancel download you will be able to start a new download and cancel it again, over and over. In order to achieve that the Download button instantiate a new AbortController every time, so you get a fresh signal to abort every time:

downloadBtn.addEventListener('click', fetchVideo);

function fetchVideo() {
  controller = new AbortController;
  signal = controller.signal;
  // ...

So it's ok to instantiate new AbortControllers for each request that you may wish to cancel.

Answer 2

You just can't reuse or reset an AbortController or its signal. If you need to reset it you have to create a new AbortController instance.

I think this is by design. Otherwise it could get messy e.g. if you hand over the controller or signal to some external library and suddenly they could remotely abort and un-abort your internal state by accident.