微信小程序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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
使用JS实现动态时钟
Mar 12 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python如何读取MySQL数据库表数据
2017/03/11 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
模具专业推荐信
2013/10/30 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
七年级数学教学反思
2014/01/22 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers