深入讲解xhr（XMLHttpRequest）/jsonp请求之abort

前言

相信大家在工作中经常需要使用AJAX，所以当大家看到文章标题的时候可能会觉得这是一个老生常谈的话题。

前端开发中向后端发起xhr（XMLHttpRequest）请求（代表性的就是熟悉的ajax）是再正常不过的事。

但在前端开发过程中，不怎么重视xhr的abort（中止掉xhr请求，及表示取消本次请求）。往往会带来一些不可意料的结果。

比如：切换tab，发起xhr请求，渲染同一个列表。就这么简单的拉取数据渲染列表的功能，并且可以根据tab切换。想想应该是很简单。但是假如你只顾着发起xhr请求，而没有abort掉它，想想会发生什么。很有可能就是当前选中的tab数据，并不是你想要的。说白了就是数据错了。这时候你可能就要考虑是不是xhr请求返回数据的顺序问题。

答案是肯定的，xhr请求返回数据顺序是不固定的。所以你要做的就是abort掉你之前的xhr请求，然后再发起一个新的xhr请求。

结合上面所说的例子可以知道xhr使用不当会存在以下问题：

为了解决上面的问题，我们在进行页面的时候就必须考虑abort掉所有的xhr请求。

那么如何实现xhr的abort方法呢，或者通过何种方式abort掉xhr呢？

一个简单的xhr

我们都知道，现在的框架（例如：jQuery的ajax模块）对xhr都进行了封装，是为了让我们更好的使用xhr。但是也蒙蔽了我们的眼睛。让我们抛开框架，来看看一个简单的xhr怎么实现。

//仅供参考 xhrfunction ajax(type ,url , data , successCallBack , errorCallBack){ let xhr = new XMLHttpRequest(); xhr.onload = ()=>{ if(xhr.status === 200){  return successCallBack(xhr.response||xhr.responseText); } return errorCallBack('请求失败'); } xhr.onerror = ()=>{ return errorCallBack('出错了'); } xhr.open(type,url); xhr.send(data ? data:null);}

这就是一个简单的xhr请求的实现，我把它命名为ajax,我们现在可以通过以下方式进行调用：

ajax('get','/test/getUserList' , undefined , function(result){ console.log('成功了。', result);} ,function(error){ console.log(error);});

如果使用这个方法我们是没办法abort掉xhr请求的。好吧，现在我们把它改造一下，让它支持abort方法：

//仅供参考 xhr.abortfunction ajax(type ,url , data , successCallBack , errorCallBack){ let xhr = new XMLHttpRequest(); xhr.onload = ()=>{ if(xhr.status === 200){  return successCallBack(xhr.response||xhr.responseText); } return errorCallBack('请求失败'); } xhr.onerror = ()=>{ return errorCallBack('出错了'); } xhr.open(type,url); xhr.send(data ? data:null); return xhr;//返回XMLHttpRequest实例对象}