关于分层架构的思想

问题:在写用户登录模块的时候,要请求相应的接口,这时接口的封装涉及到分层架构

解决:

1.工具层:封装ajax请求的公共方法

2.数据层:根据不同的模块,对应封装不同的请求接口

3.业务层:调用相应的接口函数,传相应的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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;

 

1
2
3
4
5
6
7
8
9
10
11
12
13
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;

  

1
2
3
4
5
6
7
8
9
10
11
onSubmit(){
    _user.login({
        username:this.state.username,
        password:this.state.password
    })
    .then((res)=>{
 
    }, (err)=>{
 
    })
}

  

 

posted @   haines  阅读(458)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示