微信小程序之二次封装request网络请求 - 好文

哈喽！今天给大家分享一个小技巧，大家做小程序项目的时候肯定会遇到数据对接，需要用到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) => { //成功函数回调区间，必写
})
谢谢大家能够阅读我这篇文章，感谢支持。我是小九

热门工具换一换