【问题标题】：How to cancel ALL requests in ComponentWillUnmount?如何取消 ComponentWillUnmount 中的所有请求？
【发布时间】：2016-12-12 22:47:15
【问题描述】：

根据docs，ComponentWillUnmount 可以取消请求。

我有一个页面请求加载 iframe，以及其他页面请求。如果用户决定在页面仍在处理请求时离开该页面，我该如何取消这些请求，以免影响用户之后访问的其他页面？

我应该注意我正在使用 Redux 和 Redux-saga。

【问题讨论】：

componentWillUnmount 无法取消“请求”。这是一个你应该执行任何必要清理的地方。究竟是什么取决于你在做什么，与 React 无关。所以，如果你有关于中止加载 iframe 的具体问题，你应该问这个问题（同样，它与 React 无关）。但是，已经有一个问题：How to stop iframe loading?

标签： javascript reactjs

【解决方案1】：

只需将componentWillUnmount 视为机会函数。这是你的机会，就像文档所说的那样，执行任何 React 自己不会做的额外清理。

就 XHR 请求而言，您需要有一个支持取消承诺的 Promise 库。如果您使用的库确实支持，那么在componentWillUnmount 中，您只需确保您可以访问所有 Promises 并取消每一个。

至于取消任何其他内容，您只需要使用为您提供的任何功能来取消您想要取消的任何内容。如果它们是取消它的功能，那么如果您需要在卸载组件时取消它，请使用componentWillUnmount 的性质来执行此操作。

作为我现在使用它的示例：如果一个组件要发出请求，我们在该组件上设置一个属性，该属性是一个数组并保存所有请求。我们称之为this.statePromises。每当我们提出请求/承诺时，我们都会将该承诺推送到this.statePromises。在componentWillUnmount 我们有以下

componentWillUnmount() {
  this.statePromises.forEach(p => p.cancel());
 }

p 是一个承诺。这只适用于我们用于承诺的库 bluebird。但这应该让您了解如何使用componentWillUnmount 进行任何额外的清理。

【讨论】：

【解决方案2】：

从技术上讲，您不能取消或中止承诺，因为 Web 浏览器没有公开任何方法来执行此操作。

如果用户导航到另一个页面，您可以做的只是忽略承诺。有两种方法可以做到这一点：

使用 Redux、Thunk 和 Promise 中间件

您不应将应用程序状态存储在组件状态中。通过使用 Redux，应用程序状态将在所有组件之间共享。然后在 Redux 中使用 redux-promise-middleware 和 Thunk 中间件来处理异步操作。

简单地说，在您的操作中，您可以执行以下操作：

case 'LOAD_ORDERS_SUCCESS':
  if state.location != 'orders' { return }

  // store the data in the application state

使用 RxJS 和 observables

Observables 是 Promises 的替代方式。

有一个名为 redux-observable 的库和来自 Netflix 的一个 video 库，它们解释了如何正是出于这个原因使用 Observable。在他们的文档中查看recipe：

const fetchUserEpic = action$ =>
  action$.ofType(FETCH_USER)
    .mergeMap(action =>
      ajax.getJSON(`/api/users/${action.payload}`)
        .map(fetchUserFulfilled)
        .takeUntil(action$.ofType(FETCH_USER_CANCELLED))
    );

【讨论】：