微信小程序之网络请求简单封装实例详解


Posted in Javascript onJune 28, 2017

微信小程序之网络请求简单封装实例详解

在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题。

  • 普通HTTPS请求(wx.request)
  • 上传文件(wx.uploadFile)
  • 下载文件(wx.downloadFile)
  • WebSocket通信(wx.connectSocket)

为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以;可以去阅读官方文档的网络请求api,当我们使用request时header的content-typ默认是application/json,在文档中指出method 的value必须是大写,不过经过测试,小写也能请求成功。request默认的超时时间是60s,如果我们想自定义超时时间,我们可以在app.json中加入下面代码片段,分别设置request,socket,和上传文件及下载文件的超时时间。

"networkTimeout": {
  "request": 5000,
  "connectSocket": 5000,
  "uploadFile": 5000,
  "downloadFile": 5000
 }

设置过超时时间,我们就开始封装网络请求,平时我们所接触的网络请求,一般会分为两类,一类是在后台运行的,没有加载对话框提示,另一种就是有提示,如提示正在加载数据,,那么我们就以此为线索来进行封装。先创建一个network的网络请求工具类,然后

// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail:失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
  wx.showLoading({
   title: message,
  })
 wx.request({
  url: url,
  data: params,
  header: {
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  success: function (res) {
   //console.log(res.data)
    wx.hideLoading()
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
    wx.hideLoading()
    fail()
  },
  complete: function (res) {

  },
 })
}

上面函数很好理解,参数的含义已在代码中解释,在网络请求开始前,先展示Loading对话框,提示用户当前网络正在请求数据,当网络请求成功或者失败后调用wx.hideLoading()取消提示框的展示。在api中还提供了wx.showNavigationBarLoading()用于显示当前页面的导航条加载动画,那么如果我们想展示这个动画可以在requestLoading执行开始调用wx.showNavigationBarLoading(),然后在网络请求成功或者失败后调用wx.hideNavigationBarLoading()隐藏导航栏加载动画。

当网络请求成功并且状态码为200时,将请求到的数据回调通过success(res.data)回调给我们的方法,在上面我们没有对失败原因进行细分,当然你也可以给失败回调加个参数,用于提示用户失败的原因,如res.statusCode ==500时提示服务器内部错误,res.statusCode ==-1时提示请检查网络,res.statusCode ==404,找不到地址等等。

然后我们在创建一个不显示对话框,用户后台请求数据的请求函数,为了少写代码,我们共用上面的函数,如下

//不显示对话框的请求
function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}

我们看到我们最终还是调用的requestLoading,那么我们可以在该函数作下判断,如果提示信息message==''就不显示对话框。

最终的代码

function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}
// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail:失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
 wx.showNavigationBarLoading()
 if (message != "") {
  wx.showLoading({
   title: message,
  })
 }
 wx.request({
  url: url,
  data: params,
  header: {
   //'Content-Type': 'application/json'
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  success: function (res) {
   //console.log(res.data)
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   fail()
  },
  complete: function (res) {

  },
 })
}
module.exports = {
 request: request,
 requestLoading: requestLoading
}

使用就很简单了,如下

//路径根据自己项目路径修改
var network = require("/utils/network.js")
getData:function(){
  network.requestLoading(URL.MY_SCORE, that.data.params, '正在加载数据', function (res) {
  //res就是我们请求接口返回的数据
   console.log(res)
  }, function () {
   wx.showToast({
    title: '加载数据失败',
   })
  })
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
详解webpack+angular2开发环境搭建
Jun 28 #Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 #Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 #Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 #Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 #Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 #Javascript
微信小程序后台解密用户数据实例详解
Jun 28 #Javascript
You might like
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php中strtotime函数用法详解
2014/11/15 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
ES6中的Promise代码详解
2017/10/09 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
玩转python爬虫之正则表达式
2016/02/17 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
创建服务型党组织实施方案
2014/02/25 职场文书
学校献爱心活动总结
2014/07/08 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers