當(dāng)jquery ajax遇上401請(qǐng)求的解決方法
jquery ajax是個(gè)很常用接口，而在請(qǐng)求時(shí)候，可能存在響應(yīng)401的情況（身份認(rèn)證過期或未登錄），比較容易出現(xiàn)在混合應(yīng)用上，如何進(jìn)行身份認(rèn)證，重發(fā)失敗請(qǐng)求，還是值得注意的。
ajax請(qǐng)求有兩種方式
1. 回調(diào)
最常寫的方式，成功失敗處理以回調(diào)方式傳入。
$.ajax({
ajax參數(shù)...
success : xxxxxx
error: xxxxxx
});
2. Deferred方式
Deferred模式我在《js異步編程》有說明， ajax調(diào)用本身返回就是一個(gè)Deferred對(duì)象，成功失敗回調(diào)不以參數(shù)傳入。
$.ajax({
ajax參數(shù)...
}).then(function(res){
//成功處理片段
},function(err){
//失敗處理片段
});
既然有這兩種方式，那應(yīng)對(duì)處理401的方式也是有兩種。
401處理的兩種方式
1. 回調(diào)
這種方式的處理比較簡(jiǎn)單，在失敗回調(diào)里面判斷401，如果是則進(jìn)行身份認(rèn)證，成功重發(fā)請(qǐng)求。
function getXXXX(type, url, data, success, error){
$.ajax({
ajax參數(shù)...
success : xxxxxx
error : function(xhr,textStatus,errorThrown){
if (xhr.status == 401) {
刷新身份認(rèn)證方法(function(){
getXXXX(type, url, data, success, error);
});
} else{
// 調(diào)用外部的error
error && error(xhr,textStatus,errorThrown);
}
}
});
}
2. Deferred方式
這種方式目前我找到的處理方式需要修改jquery源碼。
//全局設(shè)置一個(gè)方法
$.ajaxSetup({
authError : function(callback){
刷新身份認(rèn)證方法( 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 ] );
}
}
這里說下為什么不能像第一種方式那樣進(jìn)行請(qǐng)求。
有兩個(gè)原因：
1. then這種鏈?zhǔn)綄懛?，?dǎo)致這請(qǐng)求的回調(diào)不是在參數(shù)里，而是在jQuery.Callbacks一個(gè)optionsCache全局變量里，我們無法在ajax error里拿到回調(diào)函數(shù)進(jìn)行重發(fā)。
2. 寫在then里的回調(diào)觸發(fā)一次就會(huì)被銷毀，當(dāng)觸發(fā)了error時(shí)，回調(diào)執(zhí)行后就銷毀。
最后的處理方式就是在要觸發(fā)error之前，攔截401的錯(cuò)誤，重新進(jìn)行身份認(rèn)證，然后重置狀態(tài)，重發(fā)請(qǐng)求。
以上這篇當(dāng)jquery ajax遇上401請(qǐng)求的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jquery 仿錨點(diǎn)跳轉(zhuǎn)到頁(yè)面指定位置的實(shí)例
下面小編就為大家?guī)硪黄猨query 仿錨點(diǎn)跳轉(zhuǎn)到頁(yè)面指定位置的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了jQuery實(shí)現(xiàn)“掃碼閱讀”功能方法的相關(guān)資料,需要的朋友可以參考下2015-01-01
jQuery ajax動(dòng)態(tài)生成table功能示例
這篇文章主要介紹了jQuery ajax動(dòng)態(tài)生成table功能,結(jié)合具體實(shí)例形式分析了jQuery基于ajax數(shù)據(jù)交互動(dòng)態(tài)創(chuàng)建table表格的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
無需 Flash 使用 jQuery 復(fù)制文字到剪貼板
需要做的只是引入其腳本，在HTML標(biāo)簽上賦一個(gè)“data-clipboard-target”屬性然后寫一小段JavaScript片段。為了演示假定有一個(gè)貨幣轉(zhuǎn)換應(yīng)用，在一個(gè)文本框中輸入數(shù)值時(shí)同時(shí)將兌換結(jié)果顯示在另一個(gè)文本框中，當(dāng)點(diǎn)擊文本框時(shí)，會(huì)觸發(fā)事件將其復(fù)制到剪貼板然后顯示一條消息。2016-04-04
以前總是沒搞明白是怎么回事，現(xiàn)在是迫不得已，就仔細(xì)看了看說明文檔，終于測(cè)試成功了，記下2011-12-12
很多開發(fā)者都知道jQuery的.live()方法，他們大部分知道這個(gè)函數(shù)做什么，但是并不知道是怎么實(shí)現(xiàn)的，所以用的并不那么舒適。而且他們卻從未聽過還有解除綁定的.live()事件的.die()方法。即使你熟悉這些，但是你意識(shí)到.die()了嗎？2011-09-09
jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖
本文主要分享了jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery中even選擇器的定義和用法,較為詳細(xì)的分析了event選擇器的語(yǔ)法結(jié)構(gòu)與具體用法,并以一個(gè)設(shè)置偶數(shù)行為藍(lán)色字體的例子總結(jié)了其用法與功能特點(diǎn),需要的朋友可以參考下2014-12-12
jquery實(shí)現(xiàn)浮動(dòng)的側(cè)欄實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)浮動(dòng)的側(cè)欄,實(shí)例分析了基于jQuery的stickySidebar插件實(shí)現(xiàn)浮動(dòng)層的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Jquery實(shí)現(xiàn)縱向橫向菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01