利用 jQuery 封装一层 ajax 方法

虽然 jQuery 对ajax 已经做了一层封装，操作起来已经很简单了就像下面这样：

$.ajax({
    url: '/role/list',
    type: 'get'
    success: function (data) {
        // 请求成功的业务处理
    },
    error: function (e) {
        // 请求失败的业务处理
    }
})

即便是这样简单，同一个请求可能在一个js的很多地方都需要调用。而且存在同一个接口在别的页面中也会调用。当js文件中到处都是这种代码的时候，维护起来就很麻烦。

本着 Java 设计原则 单一职责原则、最少知识原则 同一段代码写且只写一次。有必要将调用接口封装出来统一管理

首先，像接口API这种东西需要隐藏起来对 HTML 页面调用方做到无感知，新建一个JS 文件单独存放 API 和接口调用函数

let ROLE_LIST = "/role/list"

function getDict() {
    return $.ajax({
        url: ROLE_LIST,
        type: 'GET'
    })
}

这样，在调用方只需要引入JS文件，像下面这样写即可：

<script src="role.js" type="text/javascript"></script>
<script>
getDict().done(function(data){
    // 请求成功的业务处理
}).fail(function(e){
    // 请求失败的业务处理
})
</script>

这样即使需要显式的调用 API 也只需要使用 JS 中的常量即可，后期如果接口变动也只需要更改一次即可，写且只写一次。

但是现在依然还有些不足，当前后端使用 JSON 数据格式交互以相应字段做为业务处理成功与否的标志时，就像下面这样：

# code 0-成功 1-失败
{
    'code': '0',
    'data;: {},
    'msg': '操作结果'
}

成功了，一般会有 data 和 msg

如果失败了，只会有失败的 msg 返回到前端

这样即使请求成功也需要进一步对响应结果进行判断：

<script src="role.js" type="text/javascript"></script>
<script>
getDict().done(function(data){
    if(data.code === 0) {
        // 业务处理成功的业务处理
    } else {
        // 业务处理失败的业务处理
    }
}).fail(function(e){
    // 请求失败的业务处理
})
</script>

这样每次都要在请求成功后进行判断并处理，对此还可以再封装一层：

let DICT_LIST = "/dict/list"

/**
 * 对外隐藏API和请求方式
 */
function getDict() {
    return handleAjax(DICT_LIST)
}

/**
 * 封装一层ajax
 */
function handleAjax(url, data, type) {
    return $.ajax({
        url: url,
        data: data || {},
        type: type || 'GET'
    }).then(function(resp){
        if(resp.code === 0){
            return resp.data;
        }
        else{
            return $.Deferred().reject(resp.msg);
        }
    }, function(err){
        console.log(err.status);
    });
}

这样之后，只需要调用方法，处理结果请求结果即可，不需要关心接口是什么，用什么方式请求的。专注于业务处理即可

<script src="../api/system/dict.js" type="text/javascript"></script>
<script>
getDict().done(function (data) {
    console.log(data)
}).fail(function (msg) {
    console.log(msg)
})
</script>