当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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
基于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利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
js计算精度问题小结
2013/04/22 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python常用外部指令执行代码实例
2020/11/05 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
初中生自我评价
2014/02/01 职场文书
个人现实表现材料
2014/02/04 职场文书
《将心比心》教学反思
2014/04/08 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
实习单位指导教师评语
2014/12/30 职场文书
三下乡个人总结
2015/03/04 职场文书
员工离职证明范本
2015/06/12 职场文书
高中运动会广播稿
2015/08/19 职场文书
单位提档介绍信
2015/10/22 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL