jQuery ajax預處理 和後置處理;專案中ajax自動設定 token 請求頭, 介面響應code的統一處理
阿新 • • 發佈:2018-11-19
專案中經常會遇到需要統一設定 ajax請求的預處理 和 需要統一處理ajax返回的需求
比如登入時需要 在頭部新增token(X-Auth-Token)
請求完需要判斷code為已退出token失效(3001)和許可權不足(3002)的情況
開始使用是使用 jQuery.ajaxSetup() 統一設定ajax引數,但是官方不建議使用,而且這種方式確實不夠靈活
http://api.jquery.com/jQuery.ajaxSetup/
Description: Set default values for future Ajax requests. Its use is not recommended.
後來看到 ajax的全域性事件的支援,發現這個比較適合
http://api.jquery.com/category/ajax/global-ajax-event-handlers/
if(window.jQuery){ //ajax預處理 後置處理 jQuery(document).bind("ajaxSend", function(event, request, settings){ var token = getUserToken(); //config_contextPath 為需要設定token的 全域性host,嚴格判斷防止 token傳送到其他站點被盜取 if(token && config_contextPath && settings.url && settings.url.indexOf(config_contextPath) === 0){ var headers = settings.headers || {}; headers["X-Auth-Token"] = token; request.setRequestHeader("X-Auth-Token", token); settings.headers = headers; } }).bind("ajaxComplete", function(event, xhr, settings){ if(config_contextPath && settings.url && settings.url.indexOf(config_contextPath) === 0 && (settings.dataType === 'JSON' || settings.dataType === 'json')){ if(xhr.status == 200 && xhr.responseText){ try{ var reObj = JSON.parse(xhr.responseText); //特殊code 沒有許可權 和token失效 if(reObj && (reObj.code==3001 || reObj.code==3002 )){ window.setTimeout(function () { if($(".layui-layer-dialog.layui-layer-msg:visible").length < 1){ layer.alert(reObj.message, {icon: 2}, function () { if(reObj.code==3001){ var topWindow = parent ? (parent.parent ? (parent.parent.parent ? parent.parent.parent : parent.parent) : parent) : window; topWindow.location.href='/login.html'; } }); } }, 500); } }catch (e){console.error(e)} } } }); }