ajax封装

以Java的建造者模式封装 ajax

刚开始学习JS时候,用 ajax传参很不适应,就寻思着自己封装个builder模式的 ajax。

layer

  • 本文章中的弹窗、loading使用的是 layer框架的独立弹窗组件

  • 引入方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    * layer框架的独立弹窗组件:http://layer.layui.com/?alone
    * 地址:http://layer.layui.com/?alone
    * 当前版本:3.1.12017-12-05

    1. 引入
    <!-- 你必须先引入jQuery1.8或以上版本 -->
    <script src="jQuery的路径"></script>
    <script src="layer.js的路径"></script>

    2. 文档手册
    https://www.layui.com/doc/modules/layer.html
    https://www.layui.com/doc/modules/layer.html#layer.msg

先看用法

1.基础用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
HttpGo.builder()
//url
.setUrl(URL_CODE.C102)
//参数
.setParam({phone: phone, pwd: pwd})
//成功回调
.setSuccessCallBack(data => {
//成功
})
//失败回调
.setErrorCallBack(error => {
//失败
})
//执行
.go();

2.自定义loading message

1
2
3
4
5
6
7
8
9
10
11
HttpGo.builder()
.setUrl(URL_CODE.C102)
.setParam({phone: phone, pwd: pwd})
.setLoadingMessage("登录中")
.setSuccessCallBack(data => {
//成功
})
.setErrorCallBack(error => {
//失败
})
.go();

登录

3.自定义解析

1
2
3
4
5
6
7
8
9
10
11
12
13
HttpGo.builder()
.setUrl(URL_CODE.C203)
.setLoadingMessage("重置中")
.setParam({phone: phone, pwd: pwd, code: smsCode})
//不校验接口返回的状态,自己处理
.setAutoCheckSuccessCode(false)
//不自动解析接口返回的数据
.setIsAutoParse(false)
.setSuccessCallBack(data => resetPwdSuccess(data))
//错误提示
.setErrorCustomTipStr("重置失败")
.setErrorCallBack(error => layer.msg(error))
.go();

4.上传文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//表单数据
let file = new FormData(form);
file.prototype = form;
//公司id
file.append("companyid", companyid);

HttpGo.builder()
.setUrl(upfileUrl)
.setParam(file)
//上传文件时 必选
.setUploadFile(true)
.setLoadingMessage("保存中")
.setSuccessCallBack(data => {
//成功
})
.setErrorCallBack(error => {
//失败
let customTipStr = getCustomTipStr(error, "保存失败");
layer.msg(customTipStr);
})
.go();

5.读取本地json文件

1
2
3
4
5
6
7
8
9
10
11
const configPath = "json/xxx";
HttpGo.builder()
.setHttpMethod(HttpMethod.GET)
.setBaseUrl("")
.setUrl(configPath)
.setIsAutoParse(false)
.setAutoCheckSuccessCode(false)
.setSuccessCallBack(data => {
//读取配置成功
})
.go();

6.配置全局属性也对HttpGo的ajax请求生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$.ajaxSetup({
complete: complete => {
if (complete.status !== 200) {
return;
}

//返回数据
let responseText = complete.responseText;
if (isNull(responseText)) {
return;
}
let json = isJson(responseText);
if (!json) {
return;
}

//状态码
let code = json.code;
if (code == "TOKEN1000") {
//token 检验失败清理用户缓存
autoCheckUserInfo();
}
}
});

7.其他用法参阅源码

源码

查看源码

--- 青山不改 绿水长流,日后江湖相见,自当杯酒言欢,咱们就此别过。---

本文标题:ajax封装

文章作者:mecono

发布时间:2019年08月07日 - 16:08

最后更新:2019年12月19日 - 09:12

原始链接:https://mecono.cn/1803974797.html

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-ND 4.0许可协议。转载请注明出处!