微信小程序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 相关文章推荐
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 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
php UBB 解析实现代码
2011/11/27 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
Vue中的Props(不可变状态)
2018/09/29 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python+django快速实现文件上传
2016/10/24 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
python 利用toapi库自动生成api
2020/10/19 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
工厂厂长岗位职责
2013/11/08 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
护理中职生求职信范文
2014/02/24 职场文书
财产保全担保书范文
2014/04/01 职场文书
服务承诺书格式
2014/05/21 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
临时用工协议书范本
2014/10/29 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
具结保证书
2015/01/17 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
大学生团日活动总结
2015/05/06 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js