小程序（wx.request）封装

小程序之 ajax 封装与类似cookie 用户凭证模拟
思路：
刚做小程序时，发现要用 wx.request 去向服务器获取数据:
用法：

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.js

// 函数代码  存储凭证信息
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.js

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: "网络错误" });
      }
    }) 
  })
}

小程序（wx.request） 封装

猜你喜欢