问题:在写用户登录模块的时候,要请求相应的接口,这时接口的封装涉及到分层架构
解决:
1.工具层:封装ajax请求的公共方法
2.数据层:根据不同的模块,对应封装不同的请求接口
3.业务层:调用相应的接口函数,传相应的参数
class MUtil {
request(param){
return new Promise((resolve,reject) =>{
$.ajax({
type : param.type || 'get',
url : param.url || '',
dataType : param.dataType || 'json',
data : param.data || null,
success : res => {
//请求成功
if (res.status === 0){
typeof resolve === 'function' && resolve(res.data,res.msg)//resolve为true,执行后面的语句
}
//未登录
else if (res.status === 10){
this.doLogin();
}else{
typeof reject === 'function' && reject(res.msg || res.data)//resolve为true,执行后面的语句
}
},
err : err => {
typeof reject === 'function' && reject(err.statusText)
}
});
})
}
//跳转登录
doLogin(){
window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname) ;//处理特殊字符,安全处理
}
}
export default MUtil;
import Mutil from 'util/mm.jsx';
const _mm = new Mutil();
class User{
login(loginInfo){
return _mm.request({
type:'post',
url : '/manage/user/login.do',
data:loginInfo
})
}
}
export default User;
onSubmit(){
_user.login({
username:this.state.username,
password:this.state.password
})
.then((res)=>{
}, (err)=>{
})
}