在React Redux应用中使用AbortController中止的请求将永远中止

Question

我有一个提取服务，该服务将请求发送到API（使用Redux-thunk）。 我有时想取消这些请求（通常是用户单击“取消”按钮）。

我在此服务中使用AbortController，并在组件的方法中调用此控制器的中止方法。 第一次，请求被正确中止，但是当我想再次发出该请求时，它也会被自动中止（即使在Chrome的“网络”标签中也没有请求，它会立即被拒绝）。

// fetching service
const abortController = new AbortController();
const acSignal = abortController.signal;
export { abortController };

export default class FetchService {
    public static post(url: string): Promise<Response> {
        const requestOptions = {
            method: 'POST',
            body: ...
            signal: acSignal
        };
        return new Promise((resolve, reject) => {
            fetch(url, requestOptions)
                .then(resolve, reject);
        });
    }
}


// Component
import React from 'react';
import { abortController } from '../FetchService';
class Comp extends React.Component<{}, {}> {
   ...
   onCancelRequest = () => {
      // on cancel button click, abort request
      abortController.abort();
   }

   onButtonClick = () => {
      // initiate request
   }
}

onButtonClick->请求-> onCancelRequest->请求被中止->再次onButtonClick->请求被自动中止（没有其他onCancelRequest）

任何提示可能有什么问题吗？ 我只是想在中止后再次提出请求。

Answer 1

我遇到了完全相同的问题，并通过在每次执行fetch分配新的AbortController解决了该问题。 由于我在redux thunk中处理fetch请求，因此我不确定您所用的确切解决方案。 但是在提供的代码段中，它可能看起来像这样：

// fetching service
let abortController;
export { abortController };

export default class FetchService {
    public static post(url: string): Promise<Response> {
        abortController = new AbortController();
        const requestOptions = {
            method: 'POST',
            body: ...
            signal: abortController.signal
        };
        return new Promise((resolve, reject) => {
            fetch(url, requestOptions)
                .then(resolve, reject);
        });
    }
}

但是，尽管这样做确实可行，但我不确定这种方法是否会带来诸如内存泄漏或悬空中止控制器之类的副作用，并且非常感谢有经验的开发人员的意见。 例如，是否有一种方法可以重置现有控制器，而不是实例化和分配新控制器？