ajaxWithAuth 方法的实现
function ajaxWithAuth(options) {
// 获取用户的 token,从浏览器本地存储中
var token = localStorage.getItem('access_token');
// 扩展传入的选项对象,添加 headers 和 error 处理
var defaultOptions = {
headers: {
'Authorization': 'Bearer ' + token
},
error: function (xhr, status) {
console.error('XHR Object:', xhr);
console.error('Status:', status);
if (xhr.status === 405) {
console.log("无效的请求方式");
} else if (xhr.status === 404) {
console.log("未找到URL资源");
} else if (xhr.status === 500) {
console.log("服务器内部错误,请联系管理员");
} else {
console.log("产生异常,请联系管理员");
}
// 如果请求失败,跳转到指定的失败页面
window.location.href = 'failure.html';
}
};
// 合并默认选项和用户传入的选项
var ajaxOptions = $.extend(true, {}, defaultOptions, options);
// 发起 Ajax 请求
$.ajax(ajaxOptions).done(function(res) {
console.log(res)
if (res.code === '10004') {
// 如果服务器返回的 code 值为 '10004',则跳转到登录页
// window.location.href = 'login.html'
console.log("进来了 -----10004")
}
});
}
解释和关键点
- Token 设置:通过 ‘Authorization’: 'Bearer ’ + token 头部来传递用户的 token,这在需要身份验证的请求中非常常见。
- 默认错误处理:在 error 回调中处理常见的 HTTP 错误码,并提供统一的错误处理逻辑。
- 处理特定业务逻辑:在 done 回调中,检查返回结果的 code 值,如果为 ‘10004’,则跳转到登录页。
- 扩展和合并选项:使用 $.extend 合并传入的选项和默认选项,以确保每次请求都能正确处理自定义逻辑。
使用示例
下面是如何使用 ajaxWithAuth 方法的示例。这个方法可以在任何需要发起 AJAX 请求的地方使用:
// 使用封装的 ajaxWithAuth 方法发起请求
ajaxWithAuth({
url: 'http://localhost:8089/report/revenue/testList',
type: 'GET',
data: { etlDate: '20240514' },
dataType: 'json',
success: function (res) {
console.log("9999999999")
console.log(res)
if (res.code === '200') {
// 返回成功的处理逻辑
console.log("请求成功");
// 第一次登录保存access_token在浏览器
localStorage.setItem('access_token', 'bf2we2fnl2kwv452dv23d13v23sd4v')
}
}
})