重置 AbortController 的值答案

【问题标题】：Resetting the value of AbortController重置 AbortController 的值
【发布时间】：2023-01-20 01:29:48
【问题描述】：

受此 post 的启发，DrewReese 提供了一个答案来保持 AbortController 在使用 refs 取消 API 请求时。该解决方案适用于给定的问题。这是一个需要解决的边缘案例。

假设您有一个下载按钮，用户可以在其中从服务器下载文件。当用户点击下载按钮时，会打开一个显示下载进度的模式（使用 Axios OnDownloadprogress）。模式有一个关闭按钮，它可以取消 API 请求。这问题由于没有重新渲染组件，AbortSignal 的值仍然相同。这会导致后续下载在用户再次单击下载按钮时终止。

中止控制器参考

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

关闭模态并终止请求的函数

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

API请求函数

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

【问题讨论】：

标签： javascript reactjs axios webapi abortcontroller

【解决方案1】：

要重新提交请求，请在中止后创建 AbortController 类的新实例

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

完整代码：

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);
});

【讨论】：