前言
任何一个app或者小程序,只要涉及到数据交互,就必然要写联网请求的代码,比如安卓中目前最主流的联网框架Retrofit,那么在小程序中,我们应该怎么跟后台进行交互呢?
官方文档wx.request
官方给我们提供了相应的API,我们只需要去调用即可示例代码
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
success: function(res) {
console.log(res.data)
}
})
看似很简洁对吧,但是在开发中,我们一般都会在header中携带一些公共的参数,比如appVersion,versionCode,token等等,如果我们不做封装的话,每一次发起请求我们都要把这些参数重复写一遍,这样代码看起来就非常冗余,并且浪费时间,那么我们可以对wx.request做一个封装,把公共的参数放在里面,外面的请求只需要关心自己需要携带的其他参数即可。
封装
当你新建一个小程序的时候,会自动生成utils文件夹以及util文件,既然如此,那我们就把封装放到这里好了。
思路
用户传入url,额外的参数和app.globalData,剩下的请求我们帮用户完成即可,至于为什么要传入app.globalData,是因为util中拿不到,所以只能通过用户传进来,并且很多参数都是保存在app.globalData中,比如token这些。
function request(url, globalData, data) {
return new Promise(function (resolve, reject) {
var token = globalData.token
//根据服务器是正式还是测试决定传入的参数,后续但凡涉及到env判断都是如此
let appSecret = globalData.env == "release" ? "12345" : "67890"
let sign = {
"appKey": globalData.env == "release" ? "12345" : "67890",
"appCode": "lxt",
"appVersion": "1.0.0",
"appClient": /Android/.test(globalData.system.system) ? 'andriod' : 'ios',//判断用户是安卓还是ios
"timestamp": new Date().getTime(),
"versionCode": '1',
"channel": "wx",
}
let params = {
...sign,//拿到上面的sign,如果不想分开写,也可以吧sign中的参数直接拷贝到这里是一样的效果
"token": token ? token : ""//判断是否有token,如果有就携带,否则给""
};
//把所有的参数变成json
let basicParams = JSON.stringify(params);
//发起请求,因为我们都是post请求,所以我这边直接写死了,如果大家有不同的请求方式可以加判断
wx.request({
method: 'POST',
url: url,
header: {
"content-type": "application/json",
"basicParams": basicParams//把公共的头部放进来
},
data: data,//这是用户传进来的参数
success(res) {
resolve(res);//请求成功之后的回调并且把res携带过去
},
fail(res) {
reject(new Error(res))//请求失败之后的回调并且把res携带过去
}
})
})
}
在代码中使用
1.在需要用到请求的js中添加
const { request } = require('../../utils/util.js')
2.发起请求
let globalData = app.globalData
let data = {
//比如你要携带一个名为packerCode的参数
'packetCode': globalData.packetCode
};
let url = globalData.serverHost + 'test';//传入url
request(url, globalData, data)//发起请求
.then(res => {
//请求成功,do something
}).catch(res => {
//请求失败
})
app.js中
this.globalData.system = wx.getSystemInfoSync()
//配置运行环境
var env = this.globalData.env
let host = {
test: "http://www.test.com",
release: "https://www.release.com"
}
this.globalData.serverHost = host[env];
globalData
env: 'test',
system:'',
serverHost:'',
token:'',
packetCode:''