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