微信小程序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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
微信小程序控制台提示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
新闻分类录入、显示系统
2006/10/09 PHP
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php中OR与|| AND与&&的区别总结
2013/10/26 PHP
php获取淘宝分类id示例
2014/01/16 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
php实现session共享的实例方法
2019/09/19 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
JavaScript 原型继承
2011/12/26 Javascript
js获取class的所有元素
2013/03/28 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python之import机制详解
2014/07/03 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
迟到检讨书900字
2014/01/14 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
领导参观欢迎词
2015/01/26 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书