封装小程序中get请求和post请求成全局函数(代码)
程序员文章站
2022-03-06 08:44:38
...
本篇文章给大家带来的内容是关于 封装小程序中get请求和post请求成全局函数(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
首先在app.js里面复制这段代码
/** * methods: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 */ appRequest(methods, url, data, callback, errFun) { wx.request({ url: url, method: methods, header: { 'content-type': methods == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded' }, dataType: 'json', data: data, success: function (res) { callback(res.data); }, fail: function (err) { errFun(err); } }) },
首先是get请求
const app = new getApp();// page/a/a.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //懒人的写法 URL过长和传参多的时候比较不美观 app.appRequest('get', 'https://www.apiopen.top/satinApi?type=1&page=1', {}, (res) => { console.log(res) }, (err) => { console.log('请求错误信息: ' + err.errMsg); }); //稍微优雅一点的写法,其实就是多一行代码,但是美观多了,也好维护 let url = 'https://www.apiopen.top/satinApi?type=1&page=1'; app.appRequest('get', url, {}, (res) => { console.log(res) }, (err) => { console.log('请求错误信息: ' + err.errMsg); }); } })
get请求时,data传参写为 {} 即可
然后是post请求
const app = new getApp();// page/b/b.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //懒人的写法 URL过长和传参多的时候比较不美观 app.appRequest('post', 'https://www.apiopen.top/satinApi', { type:1, page:1 }, (res) => { console.log(res) }, (err) => { console.log('请求错误信息: ' + err.errMsg); }); //稍微优雅一点的写法,其实就是多一行代码,但是美观多了,也好维护 let url = 'https://www.apiopen.top/satinApi'; let data = { type: 1, page: 1 } app.appRequest('post', url, data, (res) => { console.log(res) }, (err) => { console.log('请求错误信息: ' + err.errMsg); }); } })
当然了,如果每一个URL都在页面上面那就增大了维护成本,所以所有接口都应该放置在一个文件,我是选择放在app.js里面。下面是我的写法
//app.js里面添加全局属性,和一个函数//全局请求URL处理函数 globalRequestUrl(domainName, site) { return this.globalData[domainName] + this.globalData[site] },//全局所有请求Url globalData: { domainNameA: 'https://www.apiopen.top',//请求域名A domainNameB: 'https://www.apiopen.top',//请求域名B siteA: '/satinApi' }
使用全局请求URL处理函数在页面C里面使用get请求
const app = new getApp();// page/c/c.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //懒人的写法 URL过长和传参多的时候比较不美观 app.appRequest('get', app.globalRequestUrl('domainNameA','siteA'), {}, (res) => { console.log(res) }, (err) => { console.log('请求错误信息: ' + err.errMsg); }); //稍微优雅一点的写法,其实就是多一行代码,但是美观多了,也好维护 let url = app.globalRequestUrl('domainNameA','siteA'); app.appRequest('get', url, {}, (res) => { console.log(res) }, (err) => { console.log('请求错误信息: ' + err.errMsg); }); } })
使用全局请求URL处理函数在页面D里面使用post请求
const app = new getApp();// page/d/d.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //懒人的写法 URL过长和传参多的时候比较不美观 app.appRequest('post', app.globalRequestUrl('domainNameA','siteA'), { type:1, page:1 }, (res) => { console.log(res) }, (err) => { console.log('请求错误信息: ' + err.errMsg); }); //稍微优雅一点的写法,其实就是多一行代码,但是美观多了,也好维护 let url = app.globalRequestUrl('domainNameA','siteA'); let data = { type: 1, page: 1 } app.appRequest('post', url, data, (res) => { console.log(res) }, (err) => { console.log('请求错误信息: ' + err.errMsg); }); } })
//传说中一行完成请求的代码在此,哈哈哈哈哈 app.appRequest('get', app.globalRequestUrl('domainNameA', 'siteA'), {}, (res) => {console.log(res)});
相关推荐:
以上就是封装小程序中get请求和post请求成全局函数(代码)的详细内容,更多请关注其它相关文章!
上一篇: PHP如何实现AES加密、解密?方法介绍(代码示例)
下一篇: php服务端如何响应post请求?