小程序 之 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: "网络错误" });
}
})
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。