前言

相信大家在工作中經(jīng)常需要使用AJAX，所以當大家看到文章標題的時候可能會覺得這是一個老生常談的話題。

前端開發(fā)中向后端發(fā)起xhr（XMLHttpRequest）請求（代表性的就是熟悉的ajax）是再正常不過的事。

但在前端開發(fā)過程中，不怎么重視xhr的abort（中止掉xhr請求，及表示取消本次請求）。往往會帶來一些不可意料的結(jié)果。

比如：切換tab，發(fā)起xhr請求，渲染同一個列表。就這么簡單的拉取數(shù)據(jù)渲染列表的功能，并且可以根據(jù)tab切換。想想應該是很簡單。但是假如你只顧著發(fā)起xhr請求，而沒有abort掉它，想想會發(fā)生什么。很有可能就是當前選中的tab數(shù)據(jù)，并不是你想要的。說白了就是數(shù)據(jù)錯了。這時候你可能就要考慮是不是xhr請求返回數(shù)據(jù)的順序問題。

答案是肯定的，xhr請求返回數(shù)據(jù)順序是不固定的。所以你要做的就是abort掉你之前的xhr請求，然后再發(fā)起一個新的xhr請求。

結(jié)合上面所說的例子可以知道xhr使用不當會存在以下問題：

為了解決上面的問題，我們在進行頁面的時候就必須考慮abort掉所有的xhr請求。

那么如何實現(xiàn)xhr的abort方法呢，或者通過何種方式abort掉xhr呢？

一個簡單的xhr

我們都知道，現(xiàn)在的框架（例如：jQuery的ajax模塊）對xhr都進行了封裝，是為了讓我們更好的使用xhr。但是也蒙蔽了我們的眼睛。讓我們拋開框架，來看看一個簡單的xhr怎么實現(xiàn)。

//僅供參考 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請求的實現(xiàn)，我把它命名為ajax,我們現(xiàn)在可以通過以下方式進行調(diào)用：

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

如果使用這個方法我們是沒辦法abort掉xhr請求的。好吧，現(xiàn)在我們把它改造一下，讓它支持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實例對象}