当jquery ajax遇上401请求的解决方法


Posted in Javascript onMay 19, 2016

jquery ajax是个很常用接口,而在请求时候,可能存在响应401的情况(身份认证过期或未登录),比较容易出现在混合应用上,如何进行身份认证,重发失败请求,还是值得注意的。

ajax请求有两种方式

1. 回调

最常写的方式,成功失败处理以回调方式传入。

$.ajax({
   ajax参数...
   success : xxxxxx
   error: xxxxxx
});

2. Deferred方式

Deferred模式我在《js异步编程》有说明, ajax调用本身返回就是一个Deferred对象,成功失败回调不以参数传入。

$.ajax({
   ajax参数...
}).then(function(res){
  //成功处理片段
},function(err){
  //失败处理片段
});

既然有这两种方式,那应对处理401的方式也是有两种。

401处理的两种方式

1. 回调

这种方式的处理比较简单,在失败回调里面判断401,如果是则进行身份认证,成功重发请求。

function getXXXX(type, url, data, success, error){
$.ajax({
  
ajax参数...
  
 success : xxxxxx
  
 error : function(xhr,textStatus,errorThrown){
    
if (xhr.status == 401) {
    

 刷新身份认证方法(function(){
       
getXXXX(type, url, data, success, error);
      
});
      } else{
      
// 调用外部的error
        error && error(xhr,textStatus,errorThrown);
   
 }
  
}

});
}

2. Deferred方式

这种方式目前我找到的处理方式需要修改jquery源码。

//全局设置一个方法
$.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这种链式写法,导致这请求的回调不是在参数里,而是在jQuery.Callbacks一个optionsCache全局变量里,我们无法在ajax error里拿到回调函数进行重发。

2. 写在then里的回调触发一次就会被销毁,当触发了error时,回调执行后就销毁。

最后的处理方式就是在要触发error之前,拦截401的错误,重新进行身份认证,然后重置状态,重发请求。

以上这篇当jquery ajax遇上401请求的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
js jquery做的图片连续滚动代码
Jan 06 Javascript
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
基于Echarts 3.19 制作常用的图形(非静态)
May 19 #Javascript
前端js文件合并的三种方式推荐
May 19 #Javascript
Node.js+Express配置入门教程
May 19 #Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 #Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 #Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 #Javascript
去除html代码里面的script正则方法
May 19 #Javascript
You might like
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
python中pass语句用法实例分析
2015/04/30 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
简单了解python中对象的取反运算符
2019/07/01 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
会计岗位职责
2013/11/08 职场文书
课程设计心得体会
2013/12/28 职场文书
运动会广播稿300字
2014/01/10 职场文书
敬老月活动总结
2014/08/28 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
驳回起诉裁定书
2015/05/19 职场文书
离婚纠纷代理词
2015/05/23 职场文书
新郎婚礼致辞
2015/07/27 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书