當(dāng)jquery ajax遇上401請求的解決方法
jquery ajax是個很常用接口,而在請求時候,可能存在響應(yīng)401的情況(身份認證過期或未登錄),比較容易出現(xiàn)在混合應(yīng)用上,如何進行身份認證,重發(fā)失敗請求,還是值得注意的。
ajax請求有兩種方式
1. 回調(diào)
最常寫的方式,成功失敗處理以回調(diào)方式傳入。
$.ajax({ ajax參數(shù)... success : xxxxxx error: xxxxxx });
2. Deferred方式
Deferred模式我在《js異步編程》有說明, ajax調(diào)用本身返回就是一個Deferred對象,成功失敗回調(diào)不以參數(shù)傳入。
$.ajax({ ajax參數(shù)... }).then(function(res){ //成功處理片段 },function(err){ //失敗處理片段 });
既然有這兩種方式,那應(yīng)對處理401的方式也是有兩種。
401處理的兩種方式
1. 回調(diào)
這種方式的處理比較簡單,在失敗回調(diào)里面判斷401,如果是則進行身份認證,成功重發(fā)請求。
function getXXXX(type, url, data, success, error){ $.ajax({ ajax參數(shù)... success : xxxxxx error : function(xhr,textStatus,errorThrown){ if (xhr.status == 401) { 刷新身份認證方法(function(){ getXXXX(type, url, data, success, error); }); } else{ // 調(diào)用外部的error error && error(xhr,textStatus,errorThrown); } } }); }
2. Deferred方式
這種方式目前我找到的處理方式需要修改jquery源碼。
//全局設(shè)置一個方法 $.ajaxSetup({ authError : function(callback){ 刷新身份認證方法( function(){ callback && callback(); }); } }); //jquery2.1.4版本源碼,大概是8261行 // Success/Error if ( isSuccess ) { deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] ); } else { if(( jqXHR.status == 401 || jqXHR .status == 403) && callbackContext.authError){ callbackContext.authError(function (){ state = 0; jqXHR.setRequestHeader( "Authorization", XXXXXX); jqXHR.readyState = 1; try { state = 1; transport.send( requestHeaders, done ); } catch ( e ) { // Propagate exception as error if not done if ( state < 2 ) { done( -1, e ); // Simply rethrow otherwise } else { throw e; } } }); return; } else { deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] ); } }
這里說下為什么不能像第一種方式那樣進行請求。
有兩個原因:
1. then這種鏈式寫法,導(dǎo)致這請求的回調(diào)不是在參數(shù)里,而是在jQuery.Callbacks一個optionsCache全局變量里,我們無法在ajax error里拿到回調(diào)函數(shù)進行重發(fā)。
2. 寫在then里的回調(diào)觸發(fā)一次就會被銷毀,當(dāng)觸發(fā)了error時,回調(diào)執(zhí)行后就銷毀。
最后的處理方式就是在要觸發(fā)error之前,攔截401的錯誤,重新進行身份認證,然后重置狀態(tài),重發(fā)請求。
以上這篇當(dāng)jquery ajax遇上401請求的解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
無需 Flash 使用 jQuery 復(fù)制文字到剪貼板
需要做的只是引入其腳本,在HTML標簽上賦一個“data-clipboard-target”屬性然后寫一小段JavaScript片段。為了演示假定有一個貨幣轉(zhuǎn)換應(yīng)用,在一個文本框中輸入數(shù)值時同時將兌換結(jié)果顯示在另一個文本框中,當(dāng)點擊文本框時,會觸發(fā)事件將其復(fù)制到剪貼板然后顯示一條消息。2016-04-04jquery實現(xiàn)自適應(yīng)banner焦點圖
本文主要分享了jquery實現(xiàn)自適應(yīng)banner焦點圖的示例代碼,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02