微信小程序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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 Vue.js
javascript实现用户必须勾选协议实例讲解
Mar 24 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Python中对象的引用与复制代码示例
2017/12/04 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
django中瀑布流写法实例代码
2019/10/14 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
Python读取csv文件实例解析
2019/12/30 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python deque模块简单使用代码实例
2020/03/12 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
法院先进个人事迹材料
2014/05/04 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python