在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装。
1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装)
request.js
var app = getApp();
//项目URL相同部分,减轻代码量,同时方便项目迁移
//调用url配置文件 文件config.js是对项目的所有url进行封装 便于管理
const CONFIG = require('../..//utils/config.js');
/** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回调函数 * doFail:失败的回调函数 */
function request(url, postData, doSuccess, doFail) {
wx.request({ //项目的真正接口,通过字符串拼接方式实现
url: CONFIG.API_UEL.url,//后面的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: CONFIG.API_UEL.url,//后面的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,
getData:getData
}
上面提到了url配置文件config.js,看看是怎么封装的吧。
const BASE = 'http://xxxx.com';//服务器域名
const CONFIG = {
API_URL: {
URL: BASE, //根路径
//所有轮播图
index: BASE + '/index', //首页的轮播图
// rotation: BASE +'/rotation',//总轮播图请求
//主页请求类型
screen: BASE + '/screen',
// 个人登录s
checklogin: BASE + '/checklogin',
getphone: BASE + '/getphone', //获取手机号
// 子分类接口
submenu: BASE + '/submenu',
//合作接口
cooperation: BASE + '/cooperation',
//教师选择类型
teachertype: BASE + '/teachertype',
edit_teacher: BASE + '/edit_teacher', //教师入驻更改
personal: BASE + '/personal',//个人中心请求
}
}
module.exports = CONFIG;
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可以换成前面定义的that
//this.shuffleSuc调用成功的参数
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("失败")
},
})
调用this.shuffleSuc方法 其实就是执行传入getData的参数doSuccess 返回数据,这样就可以减少代码冗余,