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


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 相关文章推荐
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
vue 全局环境切换问题
Oct 27 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
JS中==、===你分清楚了吗
Mar 04 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python之yield表达式学习
2014/09/02 Python
Python实现将xml导入至excel
2015/11/20 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
服装创业计划书范文
2014/02/05 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
小学教师评语大全
2014/04/23 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
教师求职自荐信范文
2015/03/04 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
国王的演讲观后感
2015/06/03 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
MySQL分布式恢复进阶
2022/07/23 MySQL