一、对小顺序的request的封装
写太小顺序的应当晓得,微信的request不封装基础上不能用,写的显的太冗杂,而且是回调式的,回调地狱什么的就不说了,可读性差。
下面是我的封装代码,趁便支撑一下promise。
function baseRequest({ 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)
}
})
}
function requestPromise( options ) {
let req = new Promise((resolve, reject) => {
baseRequest(options, resolve, reject)
})
return req
}
function get(options) {
options.method = 'GET'
return requestPromise(options)
}
function post(options) {
options.method = 'POST'
if (!options.header) {
options.header = {}
}
options.header["Content-Type"] = "application/x-www-form-urlencoded"
return requestPromise(options)
}
function put(options) {
options.method = 'PUT'
if (!options.header) {
options.header = {}
}
options.header["Content-Type"] = "application/x-www-form-urlencoded"
return requestPromise(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 )
function baseRequest({ 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)
}
})
}
function wait(options, needToken, resolve, reject) {
if (needToken) {
var token = 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)
}
}
function requestPromise( options, needToken = true ) {
let req = new Promise((resolve, reject) => {
wait(options, needToken, resolve, reject)
})
return req
}
function get(options, needToken) {
options.method = 'GET'
return requestPromise(options, needToken)
}
function post(options, needToken) {
options.method = 'POST'
if (!options.header) {
options.header = {}
}
options.header["Content-Type"] = "application/x-www-form-urlencoded"
return requestPromise(options, needToken)
}
function put(options, needToken) {
options.method = 'PUT'
if (!options.header) {
options.header = {}
}
options.header["Content-Type"] = "application/x-www-form-urlencoded"
return requestPromise(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("要求失利")
})