微信小程序网络层封装（promise, 登陆锁）

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

2、登陆锁

基本的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("请求失败")  
  })