微信小程序HTTP接口请求封装的实现


Posted in Javascript onFebruary 21, 2019

最近在学习小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,我的项目后端是使用的Java SSM框架,wx.request的URL就是后端提供的接口。在封装的时候我在网上看了很多篇博客,90%以上的全都是直接在success回调函数中直接打印返回值console.log(res.data)这个当然是没有问题的,但是我们都知道微信小程序的数据是实现数据绑定的,这一点和Vue框架很像,而在Vue框架的JS文件中我们可以通过

function loginSuccess(data){
 //成功回调函数
 //具体数据处理
}

这种方式定义回调方法,同时通过new的Vue名字.data参数名对data里面的参数值进行修改,正因为有了这种习惯后,所以我在小程序中使用这种方式刚开始一直报错,搞了好久才搞懂,现在来看一下我的小程序HTTP请求方法封装及使用:

1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装)

request.js:

var app = getApp();
//项目URL相同部分,减轻代码量,同时方便项目迁移
//这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息
var host = 'http://localhost:8081/demo/';

/**
 * POST请求,
 * URL:接口
 * postData:参数,json类型
 * doSuccess:成功的回调函数
 * doFail:失败的回调函数
 */
function request(url, postData, doSuccess, doFail) {
 wx.request({
  //项目的真正接口,通过字符串拼接方式实现
  url: host + url,
  header: {
   "content-type": "application/json;charset=UTF-8"
  },
  data: postData,
  method: 'POST',
  success: function (res) {
   //参数值为res.data,直接将返回的数据传入
   doSuccess(res.data);
  },
  fail: function () {
   doFail();
  },
 })
}

//GET请求,不需传参,直接URL调用,
function getData(url, doSuccess, doFail) {
 wx.request({
  url: host + url,
  header: {
   "content-type": "application/json;charset=UTF-8"
  },
  method: 'GET',
  success: function (res) {
   doSuccess(res.data);
  },
  fail: function () {
   doFail();
  },
 })
}

/**
 * module.exports用来导出代码
 * js文件中通过var call = require("../util/request.js") 加载
 * 在引入引入文件的时候" "里面的内容通过../../../这种类型,小程序的编译器会自动提示,因为你可能
 * 项目目录不止一级,不同的js文件对应的工具类的位置不一样
 */
module.exports.request = request;
module.exports.getData = getData;

2.page里面随便一个创建一个文件夹,创建四种文件,在js里面加入

//引入代码
var call = require("../util/request.js")

Page({
 data: {
  pictureList: [],
 },
 
 onLoad: function () {
  var that = this;
  //调用封装的方法,为了方便我直接在页面加载的时候执行这个方法
  call.getData('lunbo.do', this.shuffleSuc, this.fail);
  // 无用,前面忘记注释,抱歉
  // this.loadMsgData(that);
 },
 shuffleSuc: function (data) {
  var that = this;
  that.setData({
   pictureList: data.rows
  })
  //我后面测试了一下,直接this.setData也可以,但是因为我在没有使用封装方法的时候
  //this.setData报过错,不能直接用this,所以我在赋值的时候一般都会加上var that = this;
  //这句话算是一个不是习惯的习惯
 },
 fail: function () {
  console.log("失败")
 },
})

将回调函数写在page里面,在调用封装方法的时候通过this.方法名调用,这样就能确保that.setData方法有效,如果是写在外面的function方法小程序编译器不会报错,但是在wxml中bindtap无效,我也没深究,同时在call.getData方法中调用的时候虽然能够进入该方法,但是赋值是无效的,所以我不建议用这种方式:

function shuffleSuc(data) {
 var that = this;
 that.setData({
  pictureList: data.rows
 })
}

当然,如果哪位有新的见解欢迎留言

3. 运行之后通过小程序的控制台AppData可以打印data里面的值,同时也可以根据需要在页面中显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
Validform表单验证总结篇
Oct 31 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 #Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 #Javascript
详解Puppeteer前端自动化测试实践
Feb 21 #Javascript
javascript中join方法实例讲解
Feb 21 #Javascript
React 组件渲染和更新的实现代码示例
Feb 21 #Javascript
vue图片上传本地预览组件使用详解
Feb 20 #Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 #Javascript
You might like
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
浅谈React组件之性能优化
2018/03/02 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python设计模式之观察者模式实例
2014/04/26 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
详解python之简单主机批量管理工具
2017/01/27 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python调用私有属性的方法总结
2020/07/24 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
怎么写自荐书范文
2014/02/12 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
高考标语大全
2014/06/05 职场文书
师德培训心得体会2016
2016/01/09 职场文书