首页 › JavaScript › layui封装ajax

admin 发表于 2023-7-5 09:56:10

layui封装ajax

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

    let MOD_NAME = "wxajax";
    let layer = layui.layer;
    let $ = layui.jquery;

    let config = {
      headers: {}, //http请求头，可以放入token等等
      baseURL: "", //请求基地址
      timeout: 3000,//超时时间，为0时则无超时限制
    };

    let wxajax = new function () {
      this.get = function (url, params) {
            return ajax("GET", url, params);
      };

      this.post = function (url, params) {
            return ajax("POST", url, JSON.stringify(params));
      };

      this.delete = function (url, params) {
            return ajax("DELETE", url, params);
      }

      this.put = function (url, params) {
            return ajax("PUT", url, JSON.stringify(params));
      }
       
                // 放入本地缓存
      this.setData = function (key, value) {
            layui.data('LocalData', {
                key: key,
                value: value
            })
      };

                // 获取本地缓存
      this.getData = function (key) {
            let localData = layui.data('LocalData');
            return localData;
      };
    }

    function ajax(type, url, data) {
      return new Promise(function (resolve, reject) {
            let roleSaveLoading = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            $.ajax({
                type: type,
                url: config.baseURL + url,
                contentType: "application/json; charset=utf-8",
                data: data,
                success: function (res) {
                  layer.close(roleSaveLoading);
                  // 进行业务处理
                  if (!res.success) {
                        layer.msg(res.message);
                  } else {
                        resolve(res);
                  }
                },
                error: function () {
                  layer.close(roleSaveLoading);
                  layer.msg("系统繁忙，请稍后再试！");
                  reject();
                }
            });
      });
    };

    exports(MOD_NAME, wxajax);
})

2. 添加到layui.js中
/**
* 全局路径引用容错处理
* */
window.rootPath = (function (src) {
    src = document.scripts.src;
    return src.substring(0, src.lastIndexOf("/") + 1);
})();

/**
* 扩展包集成
* */
layui.config({
    base: rootPath + "modules/",
    version: true
}).extend({
    flyio: "wxajax"
});

3. 使用
<script>
    layui.use(['form','wxajax'], function () {
      let form = layui.form;
      let wxajax= layui.wxajax;

      // 登 录 提 交
      form.on('submit(login)', function (data) {
wxajax.post('/auth/login', data.field).then(res => {
                    // 进行业务处理
                console.log(data)
            })
            return false;
      });
    })
</script>

查看完整版本: layui封装ajax