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


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插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
javascript实现扫雷简易版
Aug 18 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
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python文件操作函数用法实例详解
2019/12/24 Python
python实现取余操作的简单实例
2020/08/16 Python
python推导式的使用方法实例
2021/02/28 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
业务总经理岗位职责
2014/02/03 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
网吧温馨提示
2015/07/17 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB