当jquery ajax遇上401请求

简介:

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的错误,重新进行身份认证,然后重置状态,重发请求。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。


本文转自 海角在眼前 博客园博客,原文链接:  http://www.cnblogs.com/lovesong/p/5402092.html  ,如需转载请自行联系原作者
相关文章
|
8月前
|
前端开发 JavaScript
JavaScript 在jQuery发送Ajax请求
JavaScript 在jQuery发送Ajax请求
58 0
|
10月前
|
XML 前端开发 JavaScript
前端祖传三件套JavaScript的网络请求之Ajax
在前端开发中,Ajax(Asynchronous JavaScript and XML)是一种异步网络请求技术,可以实现无需刷新页面的数据交互。本文将介绍 Ajax 的基本原理和使用方法。
88 0
|
11月前
|
缓存 JavaScript 前端开发
开心档之jQuery - AJAX get() 和 post() 方法
【摘要】 jQuery - AJAX get() 和 post() 方法jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。HTTP 请求:GET vs. POST两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。GET - 从指定的资源请求数据POST - 向指定的资源提交要处理的数据GET 基本上用于从服务器获得(取...
|
XML JSON 前端开发
如何理解Ajax与jQuery中的Ajax?
如何理解Ajax与jQuery中的Ajax?
|
XML JSON 前端开发
JQuery 的 Ajax 请求(重点****)
JQuery 的 Ajax 请求(重点****)
|
数据采集 SQL 前端开发
【jquery Ajax 】form表单教学+评论案例
【jquery Ajax 】form表单教学+评论案例
120 0
【jquery Ajax 】form表单教学+评论案例
|
前端开发 JavaScript