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

一、对小程序的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的接口时，不请求，直到登录完成后才会请求