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


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 相关文章推荐
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
js的三种继承方式详解
Jan 21 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
微信小程序实现评论功能
Nov 28 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
Vue多选列表组件深入详解
Mar 02 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
javascript中的几个运算符
2007/06/29 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python爬虫实现获取下一页代码
2020/03/13 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
学期自我鉴定范文
2013/10/01 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
商务英语求职信范文
2015/03/19 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
Python实现智慧校园自动评教全新版
2021/06/18 Python
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers