在 React Redux 应用程序中使用 AbortController 中止的请求将永远中止答案

【问题标题】：Aborted request using AbortController in React Redux app is aborted forever在 React Redux 应用程序中使用 AbortController 中止的请求将永远中止
【发布时间】：2019-03-26 16:14:10
【问题描述】：

我有一个 fetch 服务，它向 API 发送请求（使用 Redux-thunk）。我有时想取消这些请求（通常是用户单击取消按钮）。

我在此服务中使用 AbortController，并在组件的方法中调用此控制器的 abort 方法。第一次，请求被正确中止，但是当我想再次发出这个请求时，它也会自动中止（即使 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）

有什么提示可能是错误的吗？我只是想在它被中止后再次发出请求。

【问题讨论】：

我会切换到使用 Axios 并存储取消令牌，以便您可以在执行某个操作时取消它们。 Fetch 不允许您立即取消请求。

标签： javascript reactjs redux

【解决方案1】：

我遇到了完全相同的问题，并通过在每次执行 fetch 时分配新的 AbortController 来解决它。由于我在 redux thunk 中处理 fetch 请求，因此我不完全确定您的情况的确切解决方案。但在提供的 sn-p 的上下文中，它可能看起来像这样：

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

但是，虽然这样做可以，但我不确定这种方法是否会带来任何副作用，例如内存泄漏或悬挂的中止控制器，并且非常感谢更有经验的开发人员提供的意见。例如，有没有办法重置现有控制器而不是实例化和分配一个新控制器？

【讨论】：