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