js请求封装ajax、统一响应
简单封装一个ajax请求,可自行调整响应内容
用法
// 引入
<script src="/res/js/request.js"></script>
<script>
// 完整get例示
request.get('/url', {
// 参数
data: {id: 123},
// 请求头
// headers: {token:456},
// 同步执行
// async: false,
// 请求完成处理
success(res) {
},
// 错误处理
error(data,xhr) {
},
// 完成处理
finally(){
}
})
// 简易例示
// post
request.post('/login', {
// 参数
data: {username: 123, password: 123},
// 请求完成处理
success(res) {
// 登录成功处理
alert(res.msg)
},
})
</script>
接口
request.get(url, options)
request.post(url, options)
入参
- url: 请求的后端地址
- options 参数,例如入参、请求头、成功、失败、最终回调:
{
data: {},
headers: {},
async: true,
success: (data, xhr)=>{},
error: (data,xhr)=>{},
finally: ()=>{},
}
request.js
function ajax(options) {
// 创建 ajax 对象
var xhr = new XMLHttpRequest()
var params = ''
// 循环用户传递进来的对象格式参数
if (options.data) {
for (var attr in options.data) {
// 将参数 转换为 字符串格式 必须编码,否则特殊符号丢失,例如 + 号等
params += attr + '=' + window.encodeURIComponent(options.data[attr]) + '&'
}
// 将参数最后面的'&'截取掉
// 将截取的结果重新赋值给params 变量
params = params.substring(0, params.length - 1)
if (options.type === 'get') {
// 如果请求方式 为 GET ,直接在url后面拼接参数
options.url = options.url + '?' + params
}
}
// 配置 ajax 对象
if (options.async)
xhr.open(options.type, options.url, options.async)
else
xhr.open(options.type, options.url)
// 请求头
// 如果是 POST,就在send()方法里面传递 请求参数,且需要 设置 xhr.setRequestHeader
if (options.type !== 'get') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
}
if (options.headers) {
for (let key in options.headers) {
xhr.setRequestHeader(key, options.headers[key])
}
}
// 监听xhr 对象下面的 onload 事件
xhr.onload = function () {
var data = ''
try {
data = JSON.parse(xhr.responseText)
} catch (e) {
data = xhr.responseText
}
if (xhr.status === 200 && options.success) {
// 返回数据格式:{code:0,msg:'xx'}
if (data.code !== 0) {
if (data.code === 9)
layer.alert(data.msg, {title: "错误", shade: 0});
else
layer.msg(data.msg, {icon: 2});
} else
options.success(data, xhr)
} else if (options.error)
options.error(data, xhr)
if (options.finally) {
options.finally(xhr)
}
}
// 发送
if (options.type === 'get') {
xhr.send()
} else {
if (params)
xhr.send(params)
else if (options.data && options.headers && options.headers['Content-Type'] === 'application/json')
xhr.send(JSON.stringify(options.data))
else
xhr.send()
}
}
// 开放接口
var request = {
get: (url, options) => {
ajax({
...options,
url: url,
type: 'get',
})
},
post: (url, options) => {
ajax({
...options,
url: url,
type: 'post',
})
}
}
// get
/*
request.get('/url', {
// 参数
data: {id: 123},
// 请求头
// headers: {token:456},
// 同步执行
// async: false,
// 请求完成处理
success(res) {
},
// 错误处理
error(data,xhr){
},
// 完成处理
finally(){
}
})
// post
request.post('/url',{
// 参数
data: {id: 123},
// 请求完成处理
success(res) {
},
})
*/