function itheima(options) {
// 创建构造函数
const xhr = new XMLHttpRequest();
// 打印形参
console.log(options);
// 打印 看看
// console.log(options.params);
// 如果查询参数有值 判断查询还是新增
if (options.params) {
// console.log(options.params);
// 定义数组 装着对象的值
let qs = [];
// 遍历对象获取key
for (let key in options.params) {
// 获取键
// console.log(key);
// 获取值
// console.log(options.params[key]);
// 将键值对拼接 添加到数组中
qs.push(`${key}=${options.params[key]}`);
}
// 打印看看qs数组的值
console.log(qs);
if (qs.length > 0) {
// 看看join 转换后的拼接的字符串
// console.log(qs.join('&'));
// 把 options.url的值 赋给 xhr.open()
// options.url = options.url + `?${qs.join('&')}`;
// 简化写法
options.url += `?${qs.join('&')}`;
// 打印看看
// console.log(options.url);
}
}
// 将形参中的值 请求方法 请求地址 放入请求中
xhr.open(options.method, options.url);
// 判断请求类型
// 先把用户输入的请求方式 转为大写字母 并且 不是GET请求 并且 有data新增对象
if (options.method.toUpperCase() !== 'GET' && options.data) {
// 1.判断是否为 FormData
if (options.data instanceof FormData) {
console.log(options.data);
xhr.send(options.data);
}
// 2.判断data是否为字符串类型
else if (typeof options.data === 'string') {
// 定义请求类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(options.data);
}
// 3.判断data是否为对象类型
else if (typeof options.data === 'object') {
// 定义请求类型
xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.send(options.data);
xhr.send(JSON.stringify(options.data));
}
} else {
xhr.send();
}
// 发送请求
// 监听结果
xhr.addEventListener('load', function () {
// console.log(JSON.parse(xhr.response));
// 将结果字符串转为对象
const res = JSON.parse(xhr.response);
// 返回给 success 函数 传实参
options.success(res);
});
}
最后修改:2022 年 05 月 02 日
© 允许规范转载
END
本文作者: 鼎g
文章标题:封装属于自己的ajax请求-2021/11/14
本文地址:https://zhougewk8.cn/10.html
版权说明:若无注明,本文皆Dg's Blog-专注健康快乐每一天原创,转载请保留文章出处。
文章标题:封装属于自己的ajax请求-2021/11/14
本文地址:https://zhougewk8.cn/10.html
版权说明:若无注明,本文皆Dg's Blog-专注健康快乐每一天原创,转载请保留文章出处。