javascript - react 中止/取消 AJAX 请求。 Axios 或 XHR

Question

我刚刚开发了一个 SPA，需要帮助处理我通过 react componentDidMount 发送到我的服务器端(节点)的异步请求。查询有效，但如果我快速切换到不同的页面，ajax 响应中的 setState 函数仍在运行。虽然组件已卸载。

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

为避免此错误，如果这是执行此操作的正确方法，我想中止/取消我在 componentWillUnmount 上发送的请求。

我用 xml 和 axios 试过了，但它不起作用。我希望你能为我提供一个有效的例子。我对其他请求方法开放，例如 fetch 或其他。

代码看起来像这样 (Axios)，但它不会取消请求:

import * as React from 'react';
import axios from 'axios';

let CancelToken = axios.CancelToken;
let source = CancelToken.source();

class MakeAjaxRequest extends React.Component {
  constructor() {
    super();
    this.state = {
      data: {}
    }
  }

  componentDidMount() {
    const that = this;

    axios.get('/user/12345', {
      cancelToken: source.token
    })
      .then(function (response) {
        if (axios.isCancel(response)) {
          console.log('Request canceled', response);
        } else {
          that.setState({
            data: response.data
          });
        }
      })
      .catch(function (thrown) {
        if (axios.isCancel(thrown)) {
          console.log('Request canceled', thrown.message);
        } else {
          // handle error
        }
      });
  }

  componentWillUnmount() {
    source.cancel('Operation canceled by the user.');
  }

  //....other stuff, like render the data
}

Answer 1

Axios 有取消请求的选项:

https://github.com/axios/axios#cancellation

另一种防止 setState 在卸载组件后触发某种回调的方法是使用一个本地 bool 变量来存储组件是否已安装，即

componentDidMount(){
   this._mounted = true;
}

componentWillUnmount() {
   this._mounted = false;
}

然后在 axios 回调中检查 _mounted 是否为真，然后再尝试调用 setState()