详解微信小程序网络请求接口封装实例
网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了微信小程序网络请求接口封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
网络请求封装实例
实现定制要求和方便调用,对微信小程序的网络请求接口进行了封装
- 封装位置app.js,方便全局调用
- 实现方法调用,只用关注接口url和入参
- 默认和自定义的请求成功、失败和完成的回调处理
- 可设置请求失败自动重新请求的次数
- 可以防止重复提交
- 每个请求设定requestCode
代码
直接将这个方法放在了app.js中
/ 接口公共访问方法 @param {Object} urlPath 访问路径 @param {Object} params 访问参数(json格式) @param {Object} requestCode 访问码,返回处理使用 @param {Object} onSuess 成功回调 @param {Object} onErrorBefore 失败回调 @param {Object} onComplete 请求完成(不管成功或失败)回调 @param {Object} isVerify 是否验证重复提交 @param {Object} requestType 请求类型(默认POST) @param {Object} retry 访问失败重新请求次数(默认1次) / webCall: function (urlPath, params, requestCode, onSuess, onErrorBefore, onComplete, isVerify, requestType, retry) { var params = arguments[1] ? arguments[1] : {}; //var requestCode = arguments[2] ? arguments[2] : 1; var onSuess = 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--form-urlencoded' : 'application/json' }, // 设置请求的 header suess: function (res) { console.log("返回结果" + JSON.stringify(res.data)); if (res.data) { if (res.data.statusCode == 200) { //访问成功 onSuess(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, onSuess, onErrorBefore, onComplete, requestType, retry); }, plete: function (res) { onComplete(requestCode); //请求完成后,2秒后重复验证的开关关闭 if (isVerify) { setTimeout(function () { that.verifyCount[urlPath] = false; }, 2000); } } }) }
上面的verifyCount是放在data中的数组,apiHost 是放在js最外层的接口服务器地址,方便随时开发、测试环境。
这个方法也是必不可少的
plete: 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.onSuess, this.onErrorBefore, this.onComplete);
请求成功的回调处理
/ 接口访问成功返回 @param {Object} data @param {Object} requestCode / onSuess: 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最外层的变量,表示发起请求的数量,用于多个接口被调用,并希望在全部请求结束后关闭标题栏加载动画时用。
以上所述是长沙网络推广给大家介绍的微信小程序网络请求接口封装详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程