layui封装ajax

admin

有时候我们想通过ajax访问接口，但又感觉每一次都要去判断一遍ajax的前置动作(在头里放入token，开启加载动画等)和后置动作(判断token是否超时自动刷新，关闭加载动画等)很是啰嗦，这时候我们可以通过封装ajax省略这些没必要的代码。
1. 编写wxajax.js

1. layui.define(['layer', 'jquery'], function (exports) {
   
2.     "use strict";
   
3. 
   
4.     let MOD_NAME = "wxajax";
   
5.     let layer = layui.layer;
   
6.     let $ = layui.jquery;
   
7. 
   
8.     let config = {
   
9.         headers: {}, //http请求头，可以放入token等等
   
10.         baseURL: "", //请求基地址
    
11.         timeout: 3000,//超时时间，为0时则无超时限制
    
12.     };
    
13. 
    
14.     let wxajax = new function () {
    
15.         this.get = function (url, params) {
    
16.             return ajax("GET", url, params);
    
17.         };
    
18. 
    
19.         this.post = function (url, params) {
    
20.             return ajax("POST", url, JSON.stringify(params));
    
21.         };
    
22. 
    
23.         this.delete = function (url, params) {
    
24.             return ajax("DELETE", url, params);
    
25.         }
    
26. 
    
27.         this.put = function (url, params) {
    
28.             return ajax("PUT", url, JSON.stringify(params));
    
29.         }
    
30.        
    
31.                 // 放入本地缓存
    
32.         this.setData = function (key, value) {
    
33.             layui.data('LocalData', {
    
34.                 key: key,
    
35.                 value: value
    
36.             })
    
37.         };
    
38. 
    
39.                 // 获取本地缓存
    
40.         this.getData = function (key) {
    
41.             let localData = layui.data('LocalData');
    
42.             return localData[key];
    
43.         };
    
44.     }
    
45. 
    
46.     function ajax(type, url, data) {
    
47.         return new Promise(function (resolve, reject) {
    
48.             let roleSaveLoading = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
    
49.             $.ajax({
    
50.                 type: type,
    
51.                 url: config.baseURL + url,
    
52.                 contentType: "application/json; charset=utf-8",
    
53.                 data: data,
    
54.                 success: function (res) {
    
55.                     layer.close(roleSaveLoading);
    
56.                     // 进行业务处理
    
57.                     if (!res.success) {
    
58.                         layer.msg(res.message);
    
59.                     } else {
    
60.                         resolve(res);
    
61.                     }
    
62.                 },
    
63.                 error: function () {
    
64.                     layer.close(roleSaveLoading);
    
65.                     layer.msg("系统繁忙，请稍后再试！");
    
66.                     reject();
    
67.                 }
    
68.             });
    
69.         });
    
70.     };
    
71. 
    
72.     exports(MOD_NAME, wxajax);
    
73. })
    
74. 
    

复制代码

2. 添加到layui.js中

1. /**
   
2. * 全局路径引用容错处理
   
3. * */
   
4. window.rootPath = (function (src) {
   
5.     src = document.scripts[document.scripts.length - 1].src;
   
6.     return src.substring(0, src.lastIndexOf("/") + 1);
   
7. })();
   
8. 
   
9. /**
   
10. * 扩展包集成
    
11. * */
    
12. layui.config({
    
13.     base: rootPath + "modules/",
    
14.     version: true
    
15. }).extend({
    
16.     flyio: "wxajax"
    
17. });
    
18. 
    

复制代码

3. 使用

1. <script>
   
2.     layui.use(['form','wxajax'], function () {
   
3.         let form = layui.form;
   
4.         let wxajax= layui.wxajax;
   
5. 
   
6.         // 登 录 提 交
   
7.         form.on('submit(login)', function (data) {
   
8. wxajax.post('/auth/login', data.field).then(res => {
   
9.                     // 进行业务处理
   
10.                 console.log(data)
    
11.             })
    
12.             return false;
    
13.         });
    
14.     })
    
15. </script>
    

复制代码