当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 相关文章推荐
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
基于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数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
jquery 指南/入门基础
2007/11/30 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Openlayers实现地图全屏显示
2020/09/28 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
python requests 使用快速入门
2017/08/31 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python如何实现word批量转HTML
2020/09/30 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
Delphi工程师笔试题
2013/09/21 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
写给医院的感谢信
2015/01/22 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
react 路由Link配置详解
2021/11/11 Javascript