详解微信小程序网络请求接口封装实例


Posted in Javascript onMay 02, 2019

网络请求封装实例

实现定制要求和方便调用,对微信小程序的网络请求接口进行了封装

  1. 封装位置:app.js,方便全局调用
  2. 实现方法调用,只用关注接口url和入参
  3. 默认和自定义的请求成功、失败和完成的回调处理
  4. 可设置请求失败自动重新请求的次数
  5. 可以防止重复提交
  6. 每个请求设定requestCode

代码

直接将这个方法放在了app.js中

/**
  * 接口公共访问方法
  * @param {Object} urlPath 访问路径
  * @param {Object} params 访问参数(json格式)
  * @param {Object} requestCode 访问码,返回处理使用
  * @param {Object} onSuccess 成功回调
  * @param {Object} onErrorBefore 失败回调
  * @param {Object} onComplete 请求完成(不管成功或失败)回调
  * @param {Object} isVerify 是否验证重复提交
  * @param {Object} requestType 请求类型(默认POST)
  * @param {Object} retry 访问失败重新请求次数(默认1次)
  */
 webCall: function (urlPath, params, requestCode, onSuccess, onErrorBefore, onComplete, isVerify, requestType, retry) {
  var params = arguments[1] ? arguments[1] : {};
  //var requestCode = arguments[2] ? arguments[2] : 1;
  var onSuccess = arguments[3] ? arguments[3] : function () { };
  var onErrorBefore = arguments[4] ? arguments[4] : this.onError;
  var onComplete = arguments[5] ? arguments[5] : this.onComplete;
  var isVerify = arguments[6] ? arguments[6] : false;
  var requestType = arguments[7] ? arguments[7] : "POST";
  var retry = arguments[8] ? arguments[8] : 1;
  var that = this;

  //防止重复提交,相同请求间隔时间不能小于500毫秒
  var nowTime = new Date().getTime();
  if (this.requestCount[urlPath] && (nowTime - this.requestCount[urlPath]) < 500) {
   return;
  }
  this.requestCount[urlPath] = nowTime;
  //是否验证重复提交
  if (isVerify) {
   if (this.verifyCount[urlPath]) {
    return;
   }
   this.verifyCount[urlPath] = true; //重复验证开关开启
  }

  console.log("发起网络请求, 路径:" + (that.apiHost + urlPath) + ", 参数:" + JSON.stringify(params));
  wx.request({
   url: that.apiHost + urlPath,
   data: params,
   method: requestType, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
   header: {
    'content-type': requestType == 'POST' ?
     'application/x-www-form-urlencoded' : 'application/json'
   }, // 设置请求的 header
   success: function (res) {
    console.log("返回结果:" + JSON.stringify(res.data));
    if (res.data) {
     if (res.data.statusCode == 200) { //访问成功
      onSuccess(res.data, requestCode);
     } else if (res.data.statusCode == 300000001) { // 未登录
      that.isLogin = false;
      onErrorBefore(0, res.data.message, requestCode);
     } else {
      onErrorBefore(0, res.data.message == null ? "请求失败 , 请重试" : res.data.message, requestCode);
     }
    } else {
     onErrorBefore(0, "请求失败 , 请重试", requestCode);
    }
   },
   fail: function (res) {
    retry--;
    console.log("网络访问失败:" + JSON.stringify(res));
    if (retry > 0) return that.webCall(urlPath, params, requestCode, onSuccess, onErrorBefore, onComplete, requestType, retry);
   },
   complete: function (res) {
    onComplete(requestCode);
    //请求完成后,2秒后重复验证的开关关闭
    if (isVerify) {
     setTimeout(function () {
      that.verifyCount[urlPath] = false;
     }, 2000);
    }
   }
  })
 }

上面的verifyCount是放在data中的数组,apiHost 是放在js最外层的接口服务器地址,方便随时开发、测试环境。

这个方法也是必不可少的

complete: function (res) {
    onComplete(requestCode);
    //请求完成后,2秒后重复验证的开关关闭
    if (isVerify) {
     setTimeout(function () {
      that.verifyCount[urlPath] = false;
     }, 2000);
    }
   }
  })

调用示范

请求:

// 请求 home banner 数据
  wx.showNavigationBarLoading();
  app.webCall("/app/homeBanner", {}, QUERY_BANNER, this.onSuccess, this.onErrorBefore, this.onComplete);

请求成功的回调处理:

/**
  * 接口访问成功返回
  * @param {Object} data
  * @param {Object} requestCode
  */
 onSuccess: function (data, requestCode) {
   var that = this;
  switch (requestCode) {
   case QUERY_BANNER:
    that.setData({ bannerData: (data ? data.data : []) });
    break;
  }

QUERY_BANNER是放在js最外层的常量,用于接口访问完成后的回调方法来区分请求的接口是哪个。

请求完成的处理:

/**
  * 接口访问完成
  * @param {Object} resultCode
  */
 onComplete: function (resultCode) {
  console.log("home onComplete1");

  if (--mCurrentRequestNums <= 0) {
   wx.hideNavigationBarLoading();
  }
 }

mCurrentRequestNums 是放在js最外层的变量,表示发起请求的数量,用于多个接口同时被调用,并希望在全部请求结束后关闭标题栏加载动画时用。

以上所述是小编给大家介绍的微信小程序网络请求接口封装详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
JS实现简单打字测试
Jun 24 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
vue 搭建后台系统模块化开发详解
May 01 #Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 #Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 #Javascript
3分钟了解vue数据劫持的原理实现
May 01 #Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 #Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 #Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 #Javascript
You might like
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python实现XML解析的方法解析
2019/11/16 Python
python写一个随机点名软件的实例
2019/11/28 Python
python删除某个目录文件夹的方法
2020/05/26 Python
浅析python中的del用法
2020/09/02 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
自荐书4要点
2014/01/25 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
创先争优宣传标语
2014/10/08 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2015政治思想表现评语
2015/03/25 职场文书
给朋友的赠语
2015/06/23 职场文书