当用户导航到其他页面时,如何中止挂起的jquery ajax请求？

Question

我已经定义了一个发送jquery ajax请求的方法

sendAjaxRequest(URL, data) {
    return $.ajax({
        type        : 'POST',
        url         : URL,
        crossDomain : true,
        data        : JSON.stringify(data),
        dataType    : 'json'
    }).fail((responseData) => {
        if (responseData.responseCode) {
            console.error(responseData.responseCode);
        }
    });
}

从调用的地方我保持ajax调用的引用

this.ajaxRequest = sendAjaxRequest(Url, data);

并且基于用户导航,如果用户导航离开页面(通过路由器转到同一网站上的另一个页面)我想取消任何待处理的ajax请求.

从文档中我发现jquery jqXHR对象有一个abort取消任何ajax请求的方法.但在我的ajaxRequest目标中,我没有任何这样的方法可用.我正在使用jquery 2.2.

为了澄清我还想补充说我正在使用反应,并希望实现这一目标.

  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

取自此链接.

他们基本上说当异步获取数据时,使用componentWillUnmount在卸载组件之前取消任何未完成的请求.

我一定做错了什么.任何帮助表示赞赏.

Answer 1

根据ajax文档,你正确地做到了.该$.ajax()函数返回一个具有abort函数的对象.您应该检查函数是否存在,因为如果请求已经完成,它可能不存在.

componentWillUnmount: function(){
  if (this.ajaxRequest && this.ajaxRequest.abort){
    this.ajaxRequest.abort()
  }
}

http://api.jquery.com/jquery.ajax/#jqXHR