封装方法(Promise封装ajax)
这里使用ES6的Promise封装一个ajax请求,可以做一些公共的操作,比如拦截token处理登录校验
let request = ({type, url, data, headers, dataType, params, contentType, isBody, async}) => {//ES6语法
let requestObj = {
url: url,
type: type
}
if (headers) {
requestObj['headers'] = headers;
}
if (params) {
requestObj['data'] = params;
}
if (data) {
requestObj['data'] = data
}
if (dataType) {
requestObj['dataType'] = dataType
}
if (contentType) {
requestObj['contentType'] = contentType
}
if (isBody) {
requestObj['contentType'] = 'application/json;charset=utf-8'
requestObj['data'] = JSON.stringify(data)
}
if (!async) {
requestObj['async'] = async
}
//进行Promise封装
return new Promise((resolve, reject) => {//这句话是套路,记住
$.ajax({
...requestObj,
success: function (res) {
resolve(res);
},
error: function (jqXHR, textStatus, errorThrown) {
reject(jqXHR, textStatus, errorThrown)
}
})
});
}
可以看见request是一个函数, 参数是一个对象, 里面包含ajax的一些请求参数, 返回一个包装了ajax请求的Promise对象, 参数中isBody为ture时设置contentType和将data数据转为字符串,这是为了springboot参数用@requestBody时, 发送请求时简化一些步骤, 当springboot接口参数设置为@requestBody时, 须加上参数: {isBody: true}
如何使用
最上方图中有一个basic.js文件, 我们在这个文件中编写请求。(建议将api请求专门放到一个或多个js文件中)
function api_login(data) {
return request({
type: 'post',
url: "/login",
data: data
})
}
function api_getInfo() {
return request({
type: 'get',
url: "/user/info"
})
}
以上定义了2个request请求, 一个是登录, 一个是登录成功后获取用户信息。 他们都返回一个Promise对象。
在项目中使用, 下面是一个用户登录
function login(){
// ......登录验证
发送请求到后端验证用户名, 密码
api_login(data).then(res => {
if (res.errcode) {
$("#loginErrMsg").text(res.errmsg)
return;
}
localStorage.setItem("accessToken", res.data.accessToken);
localStorage.setItem("refreshToken", res.data.refreshToken)
api_getInfo().then(res => {
localStorage.setItem("user", JSON.stringify(res.data))
window.location.href = "/"
});
}).catch(error => {
$("#loginErrMsg").text("系统异常,登录失败")
});
}
这里判断登录内容无误后, 开始发送请求, 使用我们之前定义的api_login方法进行登录请求, res为后台返回的数据, 将token和refreshToken保存到本地, 登录后再获取用户的个人信息。 一个登录验证就完成了。
总结
回过头看。 我们先定义一个request.js文件, 分为2部分, 一部分定义一个拦截器, 捕获401,403等请求, 做出相应的处理, 再定义一个request函数, 参数为平时我们用的ajax请求参数对象, 返回一个promise对象, 里面包含了ajax请求。 再定义了一个basic.js文件, 里面存放了各种需要请求后台的接口方法, 每个方法定义了url, type等。 最后再我们自己的js文件中就可以直接使用了, 由于返回的是promise对象, 所以可以通过.then()链式调用了。