js---封装ajax的get请求和post请求
1、函数接受一个对象配置信息,url为请求的地址,type为请求的类型,data为请求参数,success为请求成功的回调函数,fail为请求失败的回调函数。
·
一、介绍:
1、函数接受一个对象配置信息,url为请求的地址,type为请求的类型,data为请求参数,success为请求成功的回调函数,fail为请求失败的回调函数
二、使用
1、当请求方式为get时,参数格式可以为:
①无参
②参数为对象:{a:1,b=2}
③参数为参数拼接的字符串格式:a=1&b=2
2、当请求方式为post时,参数格式可以为
①参数为对象:{a:1,b=2}
②参数为参数拼接的字符串格式:a=1&b=2
③参数为new FormData()
函数如下
function ajax({ url, type, data, success, fail }) {
// 1.创建xhr实例对象
const xhr = new XMLHttpRequest()
if (type && type === 'get') {
//请求类型为get请求
if (data) {
// 参数为字符串格式
if (typeof data === 'string') {
url += '?'
} else if (typeof data === 'object') {
// 参数为对象格式
const arr = []
//通过for in 循环将对象格式转化成a=1&b=2格式的字符串
for (const 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);
}
}
// 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))
}
}
})
}
更多推荐
所有评论(0)