微信小程序ajax封装,加入防抖,全局错误正确信息处理,加载蒙版处理(改)

说明:

这篇博客其实和之前发的一篇博文是差不多的,只不过一个是在vue环境使用,一个是在微信小程序下使用。

同样:封装基于promise

解决问题:

1、ajax加载蒙版

2、全局错误提示

3、全局成功提示

4、防抖功能配合(解决蒙版延迟导致客户能够点击多次)

5、默认数据过滤处理,当字符串中出现NaN,undefined,null则过滤,数据为空过滤,注意长度为零的数组不过滤

代码部分(需要的可以直接拷贝):

let msg = {
  //成功信息
  success(text){
    wx.showToast({
      title: text,
      image: "",
      mask: false,
      icon: 'none',
      duration: 2000
    })
  },
  //错误信息
  error(text){
    wx.showToast({
      title: text,
      image: "",
      mask: false,
      icon: 'none',
      duration: 2000
    })
  }
};
//过滤空数据字符串包含NaN,undefined,null
const filterdata = json => {
  let newJson = {};
  let reg = RegExp(/NaN|undefined|null/);
  for (let li in json) {
    if (json[li] && !reg.test(json[li])) {
      newJson[li] = json[li];
    }
  }
  return newJson;
};
/*支持传入参数
* header,data,method,dataType,responseType,is_suc,is_err,loadinfo,isloading
* */
let dht_ajax=function (opt){
  //ajax默认请求参数,已小程序默认数据为准
  let url=opt.url||"",
    header={},
    data=opt.data||{},
    method=opt.method||"get",
    dataType=opt.dataType||"json",
    responseType=opt.responseType||"text",
    //成功提示信息,传入true则提示默认信息,传入字符串则出现字符串信息
    is_suc = opt.is_suc || false,
    //错误提示信息,默认不出现,传入true则出现后端接口提示信息,传入字符串则提示字符串信息
    is_err = opt.is_err || false,
    
    //loading加载的参数
    title= opt.loadinfo || "加载中...",  //加载的提示
    isloading=opt.isloading || false, //当需要全局加载提示的时候
    filterNull = o.filterNull !== false;; //是否过滤空数据,默认true

  //默认提示信息处理
  is_suc = is_suc === true ? "操作成功" : is_suc;
  is_err = is_err === true ? "网络异常" : is_err;
  //过滤空数据处理
  data = filterNull === true ? filterdata(data) : data;
  
  //传入header值则走header,这里对post情况下的header值进行另外处理
  if(opt.header){
    header=opt.header;
    //否则当传入post并且header没有传递的情况下默认值
  }else if(method.toLowerCase()==="post"&&Object.keys(header).length===0){
    header={'content-type': 'application/x-www-form-urlencoded;charset=utf-8'}
  }
  
  if(isloading){
    wx.showLoading({
      title:title,
      mask:true //统一使用的时候不允许进行操作
    });
  }

  return new Promise((suc,err)=>{
    wx.request({
      url:url,
      data:data,
      header:header,
      method:method,
      dataType:dataType,
      responseType:responseType,
      success:res=>{
        let req = res.data;
        if(isloading){
          wx.hideLoading();
        }
        if(res.data.code===0){
          //正确信息处理
          is_suc !== false && msg.success(is_suc);
          suc(res);
        }else {
          //错误信息处理,这里错误信息优先丢出后端返回的错误信息,否则丢出自定义信息
          if (is_err !== false) {
            is_err !== "网络异常" ? msg.error(is_err) : msg.error(req.msg ? req.msg : "网络异常")
          }
          err(res);
        }
      },
      fail:er=>{
        if(isloading){
          wx.hideLoading();
        }
        //错误信息处理
        is_err !== false ? msg.error(is_err) : false;
        err(er);
      }
    });
  });
};

//定时器计数器
let timeOut = null;
//暴露出去的ajax
let ajax = function(opt) {
  //是否防抖
  let isAntiShake = opt.isAntiShake || false;
  let shakeTime = opt.shakeTime || 500; //默认防抖时间半秒
  if (!isAntiShake) {
    //不进行防抖处理
    return new Promise((suc, err) => {
      dht_ajax(opt)
        .then(e => {
          suc(e);
        })
        .catch(e => {
          err(e);
        });
    });
  } else {
    //进行防抖处理
    return new Promise((suc, err) => {
      timeOut && clearTimeout(timeOut);
      let callNow = !timeOut;
      if (callNow) {
        dht_ajax(opt)
          .then(e => {
            suc(e);
          })
          .catch(e => {
            err(e);
          });
      }
      timeOut = setTimeout(
        () => {
          timeOut = null;
        }, //见注解
        shakeTime
      );
    });
  }
};


module.exports={ajax};

使用:

这个直接引入文件,或者其他都行。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值