封装的一般套路
- 使用全局代码写一个比较完整的用例
- 然后写一个空函数，没有形参，没有返回值，将这个完整地放到这个空函数中
- 最后根据使用过程中的需求（即需要变更的数据）抽象参数
统一管理接口url
var RequestTheAddress = {
session: "http://127.0.0.1:89/session",
client : "http://127.0.0.1:89/client",
// ...
};
AJAX封装
// params = null, 这是 ES6 中的语法，即默认参数，
// 也就是：当这里没有参数传递进来的话，就默认为 null,有参数传递进来的话，就使用参数
function _ajax(method, url, params = null, done) {
// 统一将方法转换为小写,因为调用，这样调用ajax()函数时 method 写大小写都可以
method = method.toLowerCase();
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP");
// 将 object 类型的数据转换为 uuid=hsz-01&id=1 这种形式的字符串
if (typeof params === 'object') {
let tempArr = [];
for (let key in params) {
let value = params[key];
// 将元素一个一个的放进这个空数组中
tempArr.push(key + '=' + value);
}
//console.log(tempArr);
// join()方法：把数组中的所有元素放入一个字符串，并通过指定参数进行元素之间的分隔
params = tempArr.join('&');
console.log(params);
}
// 当使用 get 方法传递参数，应该通过 url 传递参数
if (method === 'get') {
url += '?' + params;
}
xhr.open(method, url);
// 当使用 post 方法时，要设置响应头(当传递参数为 urlencoded 形式时)
// urlencoded 形式： uuid=hsz-01&id=1
if (method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.send(params);
xhr.addEventListener('readystatechange', function () {
console.log(this.readyState);
if (this.readyState !== 4) return;
// 不应该在封装的函数中主观的处理响应结果
console.log(this.responseText);
// 无法在内部包含的函数中通过 return 的方式将返回值返回出去
// return this.responseText
// 这里使用了回调函数，
// 执行调用者
return done(JSON.parse(this.responseText));
return
});
}
AJAX调用
let ondone = function (res) {
console.log('回调开始');
console.log(res);
/*
{resCode: 0
resData: { session: '82c8638b-30c7-3060-95e4-efabbfc411db' }
resMsg: "session已传递"}
*/
console.log('回调结束');
if (res.resCode !== 0) {
return layui.layer.msg(res.resMsg, { icon: 5, time: 2000, shift: 6 });
}
window.sessionStorage.setItem('session', res.resData.session)
lastname = sessionStorage.getItem("session");
}
AJAX测试
_ajax('get', RequestTheAddress.session, {}, ondone)
