微信小程序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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
jQuery.each()用法分享
Jul 31 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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 获取本机外网/公网IP的代码
2010/05/09 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
使用C#编写创建一个线程的代码
2013/01/22 面试题
如何通过jdbc调用存储过程
2012/04/19 面试题
地理教师岗位职责
2014/03/16 职场文书
说明书范文
2014/05/07 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python