哈喽!今天给大家分享一个小技巧,大家做小程序项目的时候肯定会遇到数据对接,需要用到wx.request()这个方法,因为我们通常要进行多次的数据请求。于是乎又给大家带来一个偷懒的方法。还是老方法。封装
首先我们来看一下官方文档中介绍的wx.request()
正常用的时候我们是这样用的
wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data) }})
但是由于我们一个项目当中经常要用到这个方法
所以我们就可以把它进行二次封装成自己喜欢的写法
以我为例,首先我们在utils这个里面建立一个config.js用来作为配置文件。把所有的二次封装的东西放在里面。怎么简单怎么来。
对于函数封装,每个人封装的方式方法也不一样,我就贴上我的代码分享一下
/** * 自定义request请求基类 */function ajax(Type, params, url, successData, errorData, completeData) {//设置默认数据传数格式 var methonType = "application/json"; //访问的主域名 var https = "http://love.w.bronet.cn" //判断请求方式 if (Type === 'PUT') { var p = Object.keys(params).map(function (key) { return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]); }).join("&"); url += '?' + p; params = {} } if (Type == "POST") { methonType = "application/x-www-form-urlencoded" } //开始正式请求 wx.request({ url: https + url, method: Type, header: { 'content-type': methonType, }, data: params, //成功回调 success: (res) => { successData(res) }, //错误回调 error(res) { //检测是否传参errorData,如果有则执行回调errorData(res) if (errorData) { errorData(res) } }, //检测是否传参completeData,如果有则执行回调completeData(res) complete(res) { if (completeData) { completeData(res) } } })};
这样就封装了一个简单的wx.request()请求
然后在config.js里导出来
//导出模块module.exports = { ajax:ajax}
用的时候直接引入config.js文件
const config = require('../../utils/config.js'); config.ajax('POST', { //参数 uid: 6 }, config.myCenter, (res) => { //成功函数回调区间,必写 }, (res) => { //可写可不写,写即为失败回调 },(res) => { //可写可不写,写即为不管失败或成功都进行回调 })
这样用起来就特别方便,只需要几句代码就可以解决数据请求问题,最简短的方法如下
config.ajax('POST', { //参数 uid:6 }, config.myCenter, (res) => { //成功函数回调区间,必写 })
谢谢大家能够阅读我这篇文章,感谢支持。我是小九