您的位置:首页 > 移动开发 > 微信开发

微信小程序网络层封装的实现(promise, 登录锁)

2019-05-08 18:02 471 查看

一、对小程序的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("请求失败")
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: