function ajax({
url,
type,
data,
headers,
success,
fail
}) {
// 1.创建xhr实例对象
var xhr = new XMLHttpRequest()
if (type && type === 'get') {
//请求类型为get请求
if (data) {
// 参数为字符串格式
if (typeof data === 'string') {
url += '?'
} else if (typeof data === 'object') {
// 参数为对象格式
const arr = []
// 拼接参数
for (var key in data) {
arr.push(`${key}=${data[key]}`)
}
url += '?' + arr.join("&")
}
}
// 2.配置xhr
xhr.open(type, url)
// 3.发送请求
xhr.send(data)
} else if (type && type === 'post') {
// 请求类型为post请求
// 2.配置xhr,配置需要在设置请求头类型的前面
xhr.open(type, url)
if (data) {
if (typeof data === 'string') {
//参数时字符串类型
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
} else if (data instanceof FormData) {
//参数是FormData时,不需要在请求头中设置数据格式
} else if (typeof data === 'object') {
//参数为对象
xhr.setRequestHeader('Content-type', 'application/json');
data = JSON.stringify(data);
}
}
if (headers) {
// 设置header
for (var i in headers) {
xhr.setRequestHeader(i, headers[i])
}
}
// 3.发送请求
xhr.send(data)
}
// 4.监听事件
xhr.addEventListener("readystatechange", function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 请求成功
success && success(JSON.parse(xhr.response))
} else {
// 请求失败
fail && fail(JSON.parse(xhr.response))
}
}
})
}
封装ajax
最新推荐文章于 2024-07-10 17:54:35 发布