微信小程序网络层封装的实现（promise, 登录锁）
一、对小程序的request的封装
写过小程序的应该知道，微信的request不封装基本上不能用，写的显的太冗长，而且是回调式的，回调地狱什么的就不说了，可读性差。
下面是我的封装代码，顺便支持一下promise。
functionbaseRequest({url,method,header,data,complete},resolve,reject){
wx.request({
url,
method,
header,
data,
success:function(res){
//需要判断服务器code的用这一段
//我司服务器返回0表示真正的成功，其他code表示各种错误码
//if(res.data.code===0){
//resolve(res)
//}else{
//reject(res)
//}
resolve(res)
},
fail:function(res){
reject(res)
},
complete:function(res){
complete(res)
}
})
}
functionrequestPromise(options){
letreq=newPromise((resolve,reject)=>{
baseRequest(options,resolve,reject)
})
returnreq
}
functionget(options){
options.method='GET'
returnrequestPromise(options)
}
functionpost(options){
options.method='POST'
if(!options.header){
options.header={}
}
options.header["Content-Type"]="application/x-www-form-urlencoded"
returnrequestPromise(options)
}
functionput(options){
options.method='PUT'
if(!options.header){
options.header={}
}
options.header["Content-Type"]="application/x-www-form-urlencoded"
returnrequestPromise(options)
}
module.exports={
get,
post,
put
}
如何使用：
1.将上面的代码写到一个独立的文件里，我的命名为network.js。
2.然后将其绑定到全局的wx对象身上。wx.Network=require('./network.js')。(在app.js里面绑定)
3.实例如下
wx.Network.get({
url:'xxx.xxx.xxx',//请求路径
data:{
a:"a"//参数列表
}
}).then(res=>{
console.log("请求成功")
}).catch(res=>{
console.log("请求失败")
})
二、登录锁
基本的request请求封装完了后，还有一些特殊的需求，比如
1.在首页我会进行登录，登录后获得token,然后我拿着token去请求其他需要token才可以请求的接口(比如个人购物信息)
2.这个时候一种做法是登录完成前不进行需要token的请求，并且有蒙板进行拦截操作（正在登录ing...）
3.对于我公来说这种方法有一个致命的弊端，就是在高并发的情况下，服务器的压力很大，首页的登录接口很慢才有返回（进首页即自动登录），这个时候，用户看到的界面就是loading，而且可能时间比较长，如果用户对你的产品粘性不高，绝大部分人直接就走了
4.为了优化这种情况下的用户体验，我们全面取消了登录的loading，替换成了“登录锁”的形式
5.效果为未登录调用需要token的接口时，不请求，直到登录完成后才会请求
6.即如果这个请求需要token，那么先判断有没有登录，如果没有登录，启动定时器一段时间后(200ms)，再次判断，如果已经登录，发出请求，如果没有，重复以上操作
加了登录锁后的代码如下:(添加了新的wait函数，调用get,post,put时增加第二个参数，表示是否需要token)
functionbaseRequest({url,method,header,data,complete},resolve,reject){
wx.request({
url,
method,
header,
data,
success:function(res){
//需要判断服务器code的用这一段
//我司服务器返回0表示真正的成功，其他code表示各种错误码
//if(res.data.code===0){
//resolve(res)
//}else{
//reject(res)
//}
resolve(res)
},
fail:function(res){
reject(res)
},
complete:function(res){
complete(res)
}
})
}
functionwait(options,needToken,resolve,reject){
if(needToken){
vartoken=wx.getStorageSync('token')
if(!token){
setTimeout(()=>{
wait.apply(null,arguments)
},200)
}else{
if(!options.header){
options.header={}
}
options.header["token"]=token
baseRequest(options,resolve,reject)
}
}else{
baseRequest(options,resolve,reject)
}
}
functionrequestPromise(options,needToken=true){
letreq=newPromise((resolve,reject)=>{
wait(options,needToken,resolve,reject)
})
returnreq
}
functionget(options,needToken){
options.method='GET'
returnrequestPromise(options,needToken)
}
functionpost(options,needToken){
options.method='POST'
if(!options.header){
options.header={}
}
options.header["Content-Type"]="application/x-www-form-urlencoded"
returnrequestPromise(options,needToken)
}
functionput(options,needToken){
options.method='PUT'
if(!options.header){
options.header={}
}
options.header["Content-Type"]="application/x-www-form-urlencoded"
returnrequestPromise(options,needToken)
}
module.exports={
get,
post,
put
}
如何使用：（使用方式和上面一样，只是调用的时候多一个参数）
1.将上面的代码写到一个独立的文件里，我的命名为network.js。
2.然后将其绑定到全局的wx对象身上。wx.Network=require('./network.js')。(在app.js里面绑定)
3.实例如下
wx.Network.get({
url:'xxx.xxx.xxx',//请求路径
data:{
a:"a"//参数列表
}
},true//增加第二个参数，true表示需要token，false表示不需要
).then(res=>{
console.log("请求成功")
}).catch(res=>{
console.log("请求失败")
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。