小程序网络请求request封装

发布时间：2024-12-03 17:27

'Request'可用'恳请/请求您的帮助'，如'Would you kindly assist us?'。 #生活技巧# #职场沟通技巧# #商务英语口语#

目录 1、新建config文件夹，然后新建api.js，如下图所示：2、在utils文件夹下的util.js中添加封装的代码。3、封装请求的使用。3.1、在page的js文件的头部引入util.js、api.js。如下图所示：3.2、使用实例（获取首页列表数据） 4、总结

1、新建config文件夹，然后新建api.js，如下图所示：

新建配置API文件
api.js 中统一存放后台api接口，方便管理。

//测试地址 const ApiRootUrl = 'http://47.97.178.20/api/'; module.exports = { IndexBanner: ApiRootUrl + 'Banner/List', //获取列表 IndexUrl: ApiRootUrl + 'News/GetNewsListByPageType', //首页数据接口 }； 12345678910

2、在utils文件夹下的util.js中添加封装的代码。

/** * GET请求封装 */ function get(url, data = {}) { return request(url, data, 'GET') } /** * POST请求封装 */ function post(url, data = {}) { return request(url, data, 'POST') } /** * 微信的request */ function request(url, data = {}, method = "GET") { var contentType = 'application/json' return new Promise(function(resolve, reject) { wx.request({ url: url, data: data, method: method, header: { 'Content-Type': contentType, 'Authorization': 'Bearer ' + getDataByKey('token') }, success: function(res) { console.log('===============================================================================================') console.log('== 接口地址：' + url) console.log('== 接口参数：' + JSON.stringify(data)) console.log('== 请求类型：' + method) console.log("== 接口状态：" + res.statusCode); console.log('===============================================================================================') if (res.statusCode == 200) { //请求正常200 //AES解密返回的数据 var daesData = null try { //此处结合了上篇文章的AES解密，如果不需要加解密，可以自行去掉，直接使用数据 res.data。 daesData = aes.getDAes(res.data) console.log('解密后的数据：' + daesData) daesData = JSON.parse(daesData) if (daesData.status) { //正常 resolve(daesData.data); } else { //错误 reject(daesData.message) } } catch (error) { console.log('== 数据解码失败') reject("数据解码失败") } } else if (res.statusCode == 401) { //此处验证了token的登录失效，如果不需要，可以去掉。 //未登录，跳转登录界面 reject("登录已过期") wx.showModal({ title: '提示', content: '登录已过期，请立即登录，否则无法正常使用', success(res) { if (res.confirm) { console.log('用户点击确定') wx.navigateTo({ url: '/pages/login/login?toPageUrl=401', }) } else if (res.cancel) { console.log('用户点击取消') } } }) } else { //请求失败 reject("请求失败：" + res.statusCode) } }, fail: function(err) { //服务器连接异常 console.log('===============================================================================================') console.log('== 接口地址：' + url) console.log('== 接口参数：' + JSON.stringify(data)) console.log('== 请求类型：' + method) console.log("== 服务器连接异常") console.log('===============================================================================================') reject("服务器连接异常，请检查网络再试") } }) }); } module.exports = { formatTime, request, get, post }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798

3、封装请求的使用。

3.1、在page的js文件的头部引入util.js、api.js。如下图所示：

在这里插入图片描述

3.2、使用实例（获取首页列表数据）

/** * 获取首页数据 */ getIndexPagerData: function() { //请求的参数 var mydata = { "type": that.data.current, "skipCount": that.data.pagernumber * app.globalData.pagersize, "maxResultCount": app.globalData.pagersize, "Longitude": that.data.longitude, "Latitude": that.data.latitude } //此处为使用封装的post请求 util.post(api.IndexUrl, mydata).then((res) => { var list = res.items if (that.data.isRefresh) { that.setData({ pagerList: list, isRefresh: false }) } else { var templist = that.data.pagerList var resultlist = templist.concat(list) that.setData({ pagerList: resultlist }) } }).catch((errMsg) => { //错误提示信息 wx.showToast({ title: errMsg, icon: "none" }) }); }

1234567891011121314151617181920212223242526272829303132333435