小程序(wx.request) 封裝

小程序 之 ajax 封裝 與 相似cookie 用戶憑證模擬
思路:
剛作小程序時,發現 要用 wx.request 去向服務器獲取數據:
用法:php

wx.request({
  url: 'test.php', //僅爲示例,並不是真實的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默認值
  },
  success: function(res) {
    console.log(res.data)
  }
})

1.不可能在每一個頁面,去調用 低級版本的wx.reuqest 方法, 爲 每一個方法 再配置 header等等。
這樣作不便於維護,因此爲了維護統一的一個獲取服務器數據的方法,把wx.request封裝一層,把公共的header和其餘配置信息放到裏面。
2.爲了解決 地獄回調問題(即success 裏 再調用 wx.request),因此採用 加一層Promise 封裝,讓它以鏈式調用。
3.用戶登錄憑證信息能夠放在header頭裏面, 或者還能夠直接放在 data。具體靠本身選擇(
Object.assign(header, {authheader: '登錄憑證'})
或者
Object.assign(data, {authheader: '登錄憑證'})
), 我採用第一種方式。
// common/index.jsajax

// 函數代碼  存儲憑證信息
const {AUTHHEADER} = require('../config');
// 獲取 憑證
module.exports.getAuthMsg = () => {
  // 原始信息
  let {loseTime, authMsg} = wx.getStorageSync(AUTHHEADER) || {};
  loseTime = parseInt(loseTime);
  if (loseTime) {
    // 未失效
    if (loseTime > (new Date()).getTime() && authMsg) {
      return authMsg
    }
  } 
  wx.removeStorageSync(AUTHHEADER)
  return '';
};
// 設置憑證
module.exports.setAuthMsg = (authMsg) => {
  let loseTime = (new Date()).getTime() + (60 * 60 * 1000 * 24) * 15;
  wx.setStorageSync(AUTHHEADER,{
    authMsg,
    loseTime
  })
};

// ajax.jsjson

const { getAuthMsg} = require('../common/index.js');
module.exports =  ({
  url,
  header = {},
  data,
  method = 'POST',
}) => {
  return new Promise((r, j) => {
   // 獲取用戶信息
    const authHeader = getAuthMsg();
    // 包裝header
    header = Object.assign({
       // ajax 模擬頭部
      'X-Requested-With': 'XMLHttpRequest',
       // 傳輸數據格式
      'Content-Type': 'application/x-www-form-urlencoded',
       // 鑑權信息 相似於cookie  
      'authheader': authHeader,
    }, header);
    url = `${baseDomain}/${url}`;
    wx.request({
      url,
      method,
      header,
      data,
      success (res) {
        let { data: { data, flag, msg, code } } = res;
        // 返回信息正常
        if (flag === 1) {
          return r({data})
        }
        // 對應---報錯信息
        switch (code) {
          case '***1': {
            r({
              msg,
              code
            })
            break;
          }
          case '***2': {
            r({msg, code});
            break;
          }
          case '***3' : {
            r({msg, code});
            break;
          }
          default: {
            j({ msg, res})
          }
        }
      },
      fail (e) {
        j({ msg: "網絡錯誤" });
      }
    }) 
  })
}
相關文章
相關標籤/搜索