如何取消ComponentWillUnmount中的所有请求？

Question

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

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

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

Answer 1

将componentWillUnmount视为机会函数。这是你的机会，正如文档所说，执行任何额外的清理，React不会自己做。

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

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

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

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

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

Answer 2

从技术上讲，您无法取消或中止承诺，因为Web浏览器不会公开任何方法。

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

使用Redux，Thunk和promise中间件

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

简单地说，在你的行动中你可以做这样的事情：

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

  // store the data in the application state

使用RxJS和observables

Observables是Promises的另一种方式。

Netflix有一个名为redux-observable的库和一个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))
    );