微信小程序HTTP接口请求封装代码实例


Posted in Javascript onSeptember 05, 2019

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 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
layui导航栏实现代码
May 19 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 #Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 #Javascript
layui动态加载多表头的实例
Sep 05 #Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 #Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 #Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 #Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 #Javascript
You might like
php中$this->含义分析
2009/11/29 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python字符遍历的艺术
2008/09/06 Python
python操作MongoDB基础知识
2013/11/01 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
建龙钢铁面试总结
2014/04/15 面试题
公务员培训自我鉴定
2014/02/01 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
关于保护环境的建议书
2014/05/13 职场文书
运动会演讲稿50字
2014/08/25 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
毕业生党员个人总结
2015/02/14 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python