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


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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 Javascript
详解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 xml文件操作实现代码(二)
2009/03/20 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python常用排序算法的实现代码
2019/11/08 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
教师师德教育的自我评价
2013/10/31 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
保险公司年会主持词
2014/03/22 职场文书
求职信标题怎么写
2014/05/26 职场文书
大学生求职信怎么写
2015/03/19 职场文书
初中思想品德教学反思
2016/02/24 职场文书
python使用glob检索文件的操作
2021/05/20 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL