在写小程序的时候，每个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 返回数据，这样就可以减少代码冗余，