欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入講解xhr(XMLHttpRequest)/jsonp請求之a(chǎn)bort

 更新時間:2017年07月26日 09:35:37   作者:Jin  
這篇文章主要給大家深入的介紹了關(guān)于xhr(XMLHttpRequest)/jsonp請求之a(chǎn)bort的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。

前言

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

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

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

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

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

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

  • 容易出現(xiàn)頁面最終數(shù)據(jù)與狀態(tài)不一致的問題,這可能再列表篩選是出現(xiàn)的概率比較大。
  • xhr請求達(dá)到一定數(shù)量之后,瀏覽器就會顯得非常的慢。因為有太多的請求在請求服務(wù)器資源。

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

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

一個簡單的xhr

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

//僅供參考 xhr
function 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)在可以通過以下方式進(jìn)行調(diào)用:

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

如果使用這個方法我們是沒辦法abort掉xhr請求的。好吧,現(xiàn)在我們把它改造一下,讓它支持abort方法:

//僅供參考 xhr.abort
function 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實例對象
}

好像沒有什么變化對吧。不錯,只要在函數(shù)的末尾添加return xhr;將XMLHttpRequest實例對象返回即可。那我們在就已經(jīng)可以如愿的abort掉xhr請求。

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

好像我們已經(jīng)大功告成了。但是問題來了,現(xiàn)在Promise這么好用,為什么不把它加進(jìn)來呢。像這樣沒法在我們的Promise鏈?zhǔn)秸{(diào)用上使用它。

Promise封裝xhr

好了,現(xiàn)在的首要任務(wù)是封裝出一個Promise版的ajax庫。首要要確認(rèn)的就是,ajax方法需要返回的是Promise實例對象,而不再是原生的XMLHttpRequest實例對象。知道了這一點那就可以進(jìn)行封裝了。

//僅供參考 promise
function ajax(type ,url , data ){
 let xhr = new XMLHttpRequest();
 let promise = new Promise(function(resolve , reject){
 xhr.onload = ()=>{
  if(xhr.status === 200){
  return resolve(xhr.response||xhr.responseText);
  }
  return reject('請求失敗');
 }
 xhr.onerror = ()=>{
  return reject('出錯了');
 }
 xhr.open(type,url);
 xhr.send(data ? data:null);
 });
 return promise;//返回Promise實例對象
}

使用了Promise之后我們不再需要傳入回調(diào)函數(shù)。所以參數(shù)減少了。這樣我們就可以愉快的進(jìn)行鏈?zhǔn)秸{(diào)用了。

let promise = ajax('get','/test/getUserList');
promise.then((result)=>{
 console.log('成功了。', result);
},(error)=>{
 console.log(error);
})

可問題又來了,Promise實例是沒有abort方法的。假如我們把ajax方法修改為返回xhr,我們是可以如期調(diào)用abort方法殺死請求,但是我們就不能使用Promise帶給我們的好處了。

仔細(xì)思考,最后一句return promise; 這里是不能改。我們只能另外想辦法。

最簡單的解決方式就是創(chuàng)建一個xhr和promise的映射關(guān)系。也就是每一個promise對應(yīng)一個唯一的xhr請求。有了思路之后,解決方案就來了。

let map = [];//用于保存promise和xhr之間的映射關(guān)系
//僅供參考 promise abort
function ajax(type ,url , data ){
 let xhr = new XMLHttpRequest();
 let promise = new Promise(function(resolve , reject){
 xhr.onload = ()=>{
  if(xhr.status === 200){
  return resolve(xhr.response||xhr.responseText);
  }
  return reject('請求失敗');
 }
 xhr.onerror = ()=>{
  return reject('出錯了');
 }
 xhr.open(type,url);
 xhr.send(data ? data:null);
 });
 map.push({promise:promise,request:xhr});//創(chuàng)建promise和xhr之間的映射關(guān)系,保存到全局的一個數(shù)組中。
 return promise;//返回Promise實例對象
}
//abort 請求
function abort(promise){
 for(let i = 0 ; i < map.length ; i++ ){
 if ( map[i].promise === promise ){
  map[i].request.abort();
 }
 }
}

通過在全局創(chuàng)建一個map保存所有的promise和xhr之間的映射關(guān)系。這樣我們就可以在需要abort請求的時候根據(jù)映射關(guān)系找到xhr并abort請求。

let promise = ajax('get','/test/getUserList');
promise.then((result)=>{
 console.log('成功了。', result);
},(error)=>{
 console.log(error);
})
abort(promise);

好吧,到這里Promise版的ajax,我們已經(jīng)實現(xiàn)了。是不是很簡單啊。

何為jsonp

假如你還不明白jsonp是何物,那希望下面的篇幅能讓你明白??赡苣懔阈堑闹揽缭秸埱?,但是可能沒有在實戰(zhàn)中碰到過。那么我們先來看看,一個簡單的jsonp函數(shù)是怎么實現(xiàn)的吧。

let index = 0;
//僅供參考 jsonp
function jsonp(url,jsonp,successCallback , errorCallback){
 let script = document.createElement('script');
 let result ;
 script.onload = function(){
 successCallback(result);
 }
 script.onerror = function(){
 errorCallback('出錯了');
 }
 let callBackName = 'jsonpCallback'+index++;
 script.src=url+(url.indexOf('?') >=0 ? '&':'?')+jsonp+'='+callBackName;
 window[callBackName]=function(){//拿給后端進(jìn)行輸出執(zhí)行的。
 result = Array.prototype.slice.call(arguments);
 }
 document.head.append(script);
}

jsonp算起來應(yīng)該就是通過script加載實現(xiàn)的跨域請求。其中重要的就是數(shù)據(jù)返回的接收,我們需要和后端開發(fā)同學(xué)協(xié)商回調(diào)函數(shù)的變量名。然后后端獲取到回調(diào)函數(shù)名,并且在返回時把回調(diào)函數(shù)和數(shù)據(jù)拼接成字符串返回到前端。前端我們添加一個window對象的函數(shù)用于接收數(shù)據(jù),在函數(shù)執(zhí)行完成后,就會觸發(fā)script.onload事件,這樣就可以真正執(zhí)行用戶回調(diào)函數(shù)了。

可能你會覺得有點繞,其實細(xì)細(xì)的理一下,應(yīng)該就明白了。

后端其實很簡單,只要獲取到j(luò)sonp函數(shù)變量名就可以了。然后把函數(shù)和數(shù)據(jù)拼接成字符串返回即可。

下面我們來看看Node.js中的實現(xiàn):

let query = ctx.request.query;
let jsonp = query.jsonp;//與后端協(xié)商的回調(diào)參數(shù)
ctx.body = jsonp+'({code:0,msg:"success"})';

這個回調(diào)函數(shù)并不是用戶輸入的successCallback,而是jsonp函數(shù)內(nèi)部的window[callBackName] ,為什么要這樣。你細(xì)想一下JavaScript的作用域應(yīng)該就會知道。這就好比你在script標(biāo)簽中執(zhí)行一個函數(shù)一樣。

有可能我們第一次調(diào)用jsonp函數(shù)服務(wù)器會返回如下結(jié)果:

<script >
 //只有這一行是服務(wù)器返回的,
 //script標(biāo)簽是document.head.append(script)時候加的
 jsonpCallback0({code:0,msg:"success"});
</script>

所以,得出結(jié)論就是:函數(shù)必須能通過window對象上訪問到。不然執(zhí)行時就會報錯。這就是為什么我們不能直接把用戶傳入的回調(diào)直接用來當(dāng)成回調(diào)接收數(shù)據(jù)的真正原因。

再次強(qiáng)調(diào):JavaScript作用域。

一次成功的jsonp應(yīng)該是:添加script標(biāo)簽到head,后端接收到j(luò)sonp數(shù)據(jù),返回拼接好的函數(shù)名和數(shù)據(jù)字符串,執(zhí)行window對象上的函數(shù)拿到數(shù)據(jù),執(zhí)行script.onload事件,執(zhí)行成功回調(diào)。

jsonp的abort方法何去何從

現(xiàn)在你已經(jīng)知道了jsonp的原理了。那么如何才能對script加載數(shù)據(jù)進(jìn)行abort呢。

犯難的問題來了,script并沒有真正的abort方法給我們使用。我們所做的就是盡最大的努力提供類似于abort功能的方法。

思路就是使用Event事件對象。觸發(fā)script的error監(jiān)聽事件。所以我們得對jsonp函數(shù)添加一個trigger輔助函數(shù)進(jìn)行觸發(fā)error事件。

//[trigger 觸發(fā)事件]
function trigger(element,event){
 if( !isString(event) ) {
 return;
 }
 if ( element.dispatchEvent ){
 let evt = document.createEvent('Events');// initEvent接受3個參數(shù)
 evt.initEvent(event, true, true);
 element.dispatchEvent(evt);
 }else if ( element.fireEvent ){ //IE
 element.fireEvent('on'+event);
 }else{
 element['on'+event]();
 }
}
let index = 0;
//僅供參考 jsonp.abort
function jsonp(url,jsonp,successCallback , errorCallback){
 let script = document.createElement('script');
 let result ;
 script.onload = function(){
 successCallback(result);
 }
 script.onerror = function(){
 errorCallback('出錯了');
 }
 let callBackName = 'jsonpCallback'+index++;
 script.src=url+(url.indexOf('?') >=0 ? '&':'?')+jsonp+'='+callBackName;
 window[callBackName]=function(){//拿給后端進(jìn)行輸出執(zhí)行的。
 result = Array.prototype.slice.call(arguments);
 }
 script.abort = ()=>{
 return trigger(script,'error');
 };
 document.head.append(script);
 return script;
}

我們把Promise也使用進(jìn)來,那樣的話,我們就可以脫離回調(diào)地獄了不是嗎?

let index = 0;
//僅供參考 jsonp.abort
function jsonp(url,query,jsonp){
 let script = document.createElement('script');
 let result ;
 let promise = new Promise(function(resolve,reject){
 script.onload = function(){
  return resolve(result);
 }
 script.onerror = function(){
  return reject('出錯了');
 }
 let callBackName = 'jsonpCallback'+index++;
 script.src=url+(url.indexOf('?') >=0 ? '&':'?')+jsonp+'='+callBackName;
 window[callBackName]=function(){//拿給后端進(jìn)行輸出執(zhí)行的。
  result = Array.prototype.slice.call(arguments);
 }
 document.head.append(script);
 });
 script.abort = ()=>{
 return trigger(script,'error');
 };
 map.push({promise:promise,request:script});//創(chuàng)建promise和script之間的映射關(guān)系,保存到全局的一個數(shù)組中。
 return promise;
}

同樣的我們套用上面的xhr的abort函數(shù)封裝。這樣我們就大功告成了?;镜墓δ芪覀兙腿繉崿F(xiàn)了。我們就可以開始進(jìn)行調(diào)用了。

let promise = jsonp('/test/getUserList','jsonp');
promise.then((result)=>{
 console.log('成功了。', result);
},(error)=>{
 console.log(error);
})
abort(promise);

總結(jié)

雖然,我們已經(jīng)完成了封裝,但是還有很多的意外沒有考慮,要想再實戰(zhàn)中運用還必須進(jìn)行封裝和重構(gòu)。我們必須重視abort方法在xhr/jsonp中的運用,但是也不能濫用,適可而止。存在多層服務(wù)器調(diào)用時,應(yīng)該更需要慎重考慮。

要想了解更多,可以參考這是我封裝好的一個Promise版本的ajax/jsonp庫https://github.com/Yi-love/xhrp,大家也可以通過本地進(jìn)行下載。

好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

  • 詳解CocosCreator項目結(jié)構(gòu)機(jī)制

    詳解CocosCreator項目結(jié)構(gòu)機(jī)制

    這篇文章主要介紹了詳解CocosCreator項目結(jié)構(gòu)機(jī)制,只有了解這些機(jī)制后,才能更好的進(jìn)行項目開發(fā),避免潛在錯誤,并且快速的除錯
    2021-04-04
  • 通過bootstrap全面學(xué)習(xí)less

    通過bootstrap全面學(xué)習(xí)less

    這篇文章主要為大家詳細(xì)介紹了如何通過bootstrap學(xué)習(xí)less,LESS CSS是一種動態(tài)樣式語言,屬于CSS預(yù)處理語言的一種,感興趣的朋友可以參考下
    2016-11-11
  • 鼠標(biāo)懸浮停留三秒后自動顯示大圖js代碼

    鼠標(biāo)懸浮停留三秒后自動顯示大圖js代碼

    這篇文章主要介紹了鼠標(biāo)懸浮停留三秒后顯示大圖,在網(wǎng)頁中還是比較實用的,下面是示例代碼
    2014-09-09
  • js實現(xiàn)注冊頁面校驗功能

    js實現(xiàn)注冊頁面校驗功能

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)注冊頁面校驗功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • JS數(shù)組方法reduce的妙用分享

    JS數(shù)組方法reduce的妙用分享

    在?JavaScript?中,reduce?是最難理解的數(shù)組方法之一,它是一個強(qiáng)大而靈活的高階函數(shù),下面就來看看?reduce?的妙用之處,希望對大家有所幫助
    2023-02-02
  • js實現(xiàn)搜索框關(guān)鍵字智能匹配代碼

    js實現(xiàn)搜索框關(guān)鍵字智能匹配代碼

    這篇文章主要為大家分享了js實現(xiàn)搜索框關(guān)鍵字智能匹配代碼,感興趣的朋友可以參考一下
    2016-01-01
  • 詳解JavaScript的定時器

    詳解JavaScript的定時器

    這篇文章主要為大家介紹了JavaScript的定時器 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法示例

    JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法示例

    這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法,從數(shù)據(jù)結(jié)構(gòu)線性表的角度分析了數(shù)組的原理并結(jié)合實例形式分析了javascript數(shù)組的定義與使用方法,需要的朋友可以參考下
    2017-04-04
  • 微信小程序使用webview頁面轉(zhuǎn)pdf文件代碼示例

    微信小程序使用webview頁面轉(zhuǎn)pdf文件代碼示例

    工作需求,將webview的內(nèi)容導(dǎo)出到pdf輸出,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用webview頁面轉(zhuǎn)pdf文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-09-09
  • 關(guān)于JS中的apply,call,bind的深入解析

    關(guān)于JS中的apply,call,bind的深入解析

    下面小編就為大家?guī)硪黄P(guān)于JS中的apply,call,bind的深入解析。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-04-04

最新評論