在离开 React 中的组件时中止请求

Question

我正在使用 react、redux 和 react-router。我的一个页面正在发出 API 请求并显示数据。它工作正常。我想知道的是，如果 API 请求尚未完成，并且用户导航到另一条路线，我希望能够中止请求。

我假设我应该在 componentWillUnmount 中发送一些操作。只是无法理解它将如何工作。像...

componentWillUnmount() {
    this.props.dispatch(Actions.abortRequest());
}

我会将 xhr 引用存储在操作中的某处。不确定这是否是正确的方法（我认为不是），有人可以指出我正确的方向吗？

Answer 1

我看不出这种方法有什么问题。您在 store 中持有的是全局应用程序状态；如果您想根据其他操作更改 xhr 行为，则需要将该状态存储在某处。

我见过很多商店看起来像这样的例子：

{
  isFetching: false,
  items: [],
  lastUpdated: null
};

isFetching 状态然后用于显示加载微调器或防止发送多个 xhr 请求。我会看到您的使用和存储 xhr 引用并能够中止它只是对此的扩展。

Answer 2

我不认为存储 xhr 是正确的。
Actions 应该是可序列化的，而 XMLHttpRequest 绝对不是。

相反，我会使用 Redux Thunk 到 return 来自我的 action creator 的自定义对象，并执行如下操作：

function fetchPost(id) {
  return dispatch => {
    // Assuming you have a helper to make requests:
    const xhr = makePostRequest(id);

    dispatch({ type: 'FETCH_POST_REQUEST', response, id });

    // Assuming you have a helper to attach event handlers:
    trackXHR(xhr,
      (response) => dispatch({ type: 'FETCH_POST_SUCCESS', response, id }),
      (err) => dispatch({ type: 'FETCH_POST_FAILURE', err, id })
    );

    // Return an object with `abort` function to be used by component
    return { abort: () => xhr.abort() };     
  };
}

现在您可以使用组件中的 abort：

componentDidMount() {
  this.requests = [];
  this.requests.push(
    this.props.dispatch(fetchPost(this.props.postId))
  );
}

componentWillUnmount() {
  this.requests.forEach(request => request.abort());
}

在离开 React 中的组件时中止请求

Abort request while navigating away from the component in React

javascript

reactjs

react-router

redux