黑马程序员技术交流社区

标题: 【西安校区】ajax请求实用的封装方法 [打印本页]

---

作者: 逆风TO    时间: 2019-11-5 15:59
标题: 【西安校区】ajax请求实用的封装方法
个人身为一个java后端开发，对js的闭包简单理解为跨方法访问变量值，放到java里就是方法A能使用方法B中的变量。

今天写代码时看到公司之前同事写的ajax到处都是，没有任何封装，需要优化一下。
项目中的ajax到处都是这类代码：

重复多，占空间，可读性差

$.ajax({
        type: 'get',
        url: BASE_PATH + '/manage/s01/list?offset=0&limit=1000',
        success: function (result) {
            s01List=result.data.rows;
            create.s01List=groupListMap(s01List,"s03",1,"s04");
            create.s01ListBack=clone(create.s01List);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });


统一封装一下：

放到common.js文件中，通过传参直接调用，需要前后端协调一致，无法解决异步问题。



function getHttp(url, fun) {
    $.ajax({
        type: 'get',
        url: BASE_PATH + url,
        success: function (result) {
            //...
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });
}

function postHttp(url, data) {
    $.ajax({
        type: 'post',
        url: BASE_PATH + url,
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function (result) {
            if (result.state == 200) {
                //...
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });
}
解决异步问题：

利用js的闭包特点，直接写一个函数去接受异步结果，这样就极大加强了灵活性。

function initFuntion(result) {
    s01List=result.data.rows;
    create.s01List=groupListMap(s01List,"s03",1,"s04");
    create.s01ListBack=clone(create.s01List);
    console.log(create.s01ListBack);
}


getHttp(BASE_PATH + '/manage/s01/list?offset=0&limit=1000',initFuntion)


对于一些ajax进行全局设置：

这个在一些需要前后分离的项目中比较实用，每个请求都需要带上token信息，并且一些error函数也非常使用

var token = localStorage.getItem("token");

$.ajaxSetup({
        dataType: "json",
        cache: false,
    headers: {
        "token": token
    },
    xhrFields: {
            withCredentials: true
    },
    complete: function(xhr) {
        //token过期，则跳转到登录页面
        if(xhr.responseJSON.code == 401){
            parent.location.href = baseURL + 'login.html';
        }
    }，
    error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
    }
});
如果用axios更好，axios封装起来更简单方便

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2