Resetting the value of AbortController

Question

Inspired by this post , DrewReese provided an answer to persist the value of the AbortController when cancelling an API request using refs. The solution works fine for the given problem. Here is an edge case that needs solving.

Let say you have a download button where a user downloads a file from a server. When a user clicks on the download button, a modal is opened showing the progress of the downloads(using Axios OnDownloadprogress). The modal has a close button whereby it cancels the API request. The problem arises since there is no re-render of the component, the value of the AbortSignal is still the same. This causes subsequent downloads to be terminated when the user clicks on the download button again.

AbortController ref

  let controller = useRef(new AbortController()).current;

A function that closes the modal and terminates the request

 const closeModal = () => {
    //close modal logic
     controller.abort()
     }

API Request Function

const downlodFile = async (type) => {
         //some logic
        const res =  await axios({
         url: "https://www.something.com",
         onDownloadProgress: (progressEvent) => {
                  //some calculations    
                  },
         signal: controller.signal
                               })}

Answer 1

to resubmit the request, create a new instance of the AbortController class after abort

const cancelFn = function () {
    controller.abort();
    controller = new AbortController;
};

Full code:

window.addEventListener('load', function () {

    const exportBtn = document.querySelector('.export-data-link');
    const cancelBtn = document.querySelector('.export-data-cancel');
    const infoPlace = document.querySelector('.export-data-info');

    var controller = new AbortController;

    exportBtn.addEventListener('click', function (event) {
        infoPlace.style.display = 'inline';

        const request = new Request(event.target.dataset.href, { signal: controller.signal });

        fetch(request)
            .then(function (response) {
                if (response) return response.blob();
            })
            .finally(function () {
                infoPlace.style.display = 'none'
            })

            .then(function (blob) {
                if (blob) window.location.assign(window.URL.createObjectURL(blob));
            })
            .catch(function (error) {

            });
    });

    const cancelFn = function () {
        controller.abort();
        controller = new AbortController;
    };

    cancelBtn.addEventListener('click', cancelFn);
});