微信小程序網絡層封裝（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("請求失敗")  
  })