微信小程序wx.request拦截 器使用详解
作者:这麻雀 发布时间:2023-07-22 09:11:55
标签:微信,小程序,wx.request, ,
一.
请求后台的时候,服务端对每一个请求都会验证权限,而前端也需要对服务器返回的特殊状态码统一处理,所以可以针对业务封装请求。
首先我们通过request * 在每个请求头里面塞入token等信息,好让后端对请求进行权限验证。并创建一个respone * ,当服务端返回特殊的状态码,我们统一做处理,如未登录网络错误等操作。
二.
1.首先了解小程序官方api-wx.request() ,通过示例可以看出wx.request的参数是一个对象,拥有传输地址,传输内容,响应头,成功失败回调函数等属性和方法,我们可以通过封装相应的响应头和成功失败回调函数达到相应的目的:
// 官方代码示例
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
fail(res){
console.log(res)
}
})
2.封装
封装请求头和返回的状态码(注:具体头需要添加哪些属性,返回的状态码处理,是根据与后台实际沟通所需的参数来制定的)
const app = getApp();
const appid = 'xxxx';
const appSecret = 'xxxxxx';
let ajaxNum = 0;
// 获取accessToken
function getAccessToken(callback) {
wx.request({
url: '/api/Token',
data: {
appid: aesEncrypt(appid),// aesEncrypt():自定义的用crypto-js.js进行aes加密的方法,这里只需要知道加密了即可,不需要关注此方法
appSecret: aesEncrypt(appSecret),
},
success: function (res) {
if(res.statusCode ===200 && res.data.code === 0) {
let accesstoken = res.data.data.accesstoken;
if (typeof (callback) === 'function' && accesstoken) {
callback(accesstoken);
}
}
},
})
}
// 封装request请求
const myRequest = options => {
if(options) {
getAccessToken(function (accesstoken){
// header 设置Content-Type,accesstoken, usertoken, noncestr, timestamp等信息,与后台协商好
if(options.header === undefined || options.header === null) {
options.header = {};
}
options.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
// usertoken在登录后保存在缓存中,所以从缓存中取出,放在header
let usertoken = wx.getStorageSync('usertoken');
if (usertoken) {
options.header['usertoken'] = usertoken;
}
// 自定义getNoncestr()设置随机字符串,getTimestamp()获取时间戳
let noncestr = getNoncestr();
let timestamp = getTimestamp();
// sign进行加密
let sign = getSign(accesstoken, appid, appSecret, noncestr, timestamp);
if (timestamp) {
options.header['timestamp'] = timestamp;
}
if (noncestr) {
options.header['noncestr'] = noncestr;
}
if (sign) {
options.header['sign'] = sign;
}
//url
let baseUrl = config.BASE_HOST;
if (options.url.indexOf('http') != 0) {
options.url = baseUrl + options.url;
}
// method、data
if (options.method === undefined || options.method === null) {
options.method = 'post';
}
if (options.method.toLowerCase() === 'post') {
if(options.data) {
let dataStr = JSON.stringify(options.data);
let base64Str = base64Encrypt(dataStr);
options.data = serializeData({ param: base64Str });
}
}
//success
if (options.success && typeof(options.success) === 'function') {
let successCallback = options.success;
options.success = function(res) {
// 判断不同的返回码 200/404
if (res.statusCode === 200) {
try {
// 接收的后台数据用自定义base64解密方法解密后转为对象
let str = base64Decrypt(res.data);
let data = JSON.parse(str);
if (parseInt(data.resultCode, 10) === -1) {//后台商议好的状态码,-2未登录,-1-3后台出错
console.error('网络超时,请稍后重试');
} else if (parseInt(data.resultCode, 10) === -3) {
console.error(data.msg);
} else if (parseInt(data.resultCode, 10) === -2){
console.log("用户未登录-ajax");
}
res.data = data;
//调用自定义的success
successCallback(res);
} catch (e) {
console.error('出错了,' + e + ',接口返回数据:' + res.data);
}
} else if(res.statusCode === 404) {
console.log('404');
}
}
}
//执行微信的请求
wx.request(options);
});
}
}
module.exports = {
myRequest: myRequest
页面调用示范(与wx.request传参一致):
const ajax = require('ajax.js');
ajax.javaRequest({
url: '/xxx',
data: {
xxxx: xxx
},
method: 'POST',
success: res => {
console.log(res, '成功')
}
})
来源:https://www.jianshu.com/p/80b40e213f17
0
投稿
猜你喜欢
- 本节列出了可以运行MySQL的操作系统。我们使用GNU Autoconf,因此将MySQL移植到所有使用Posix线程和C++编译器的现代系
- 1.设置phpMyAdmin Language:Chinese simplified (zh-utf-8)MySQL 字符集:UTF-8 U
- 在 MySQL 中,数据库和表对应于那些目录下的目录和文件。因而,操作系统的敏感性决定数据库和表命名的大小写敏感。这就意味着数据库和表名在
- 今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下:第一步:在连接样式表的元素里定义一个id,例如
- 近年来,广告已成为很多网站的主要收入来源。不久前,在线广告往往遭到访客的拒绝,广告客户也不确定它的价值和效力。今天,大多数访客期望在商业网站
- 这个代码不是很完善,能实现基本的功能;另外有个问题,就是divOpenWin层的定位问题:发现如果其属性设置成display:none,那么
- MySQL、SQL Server和mSQL都是绝佳的SQL工具,可惜,在ASP的环境下你却用不着它们来创建实用的SQL语句。不过,你可以利用
- 关于建立索引的几个准则:1、合理的建立索引能够加速数据读取效率,不合理的建立索引反而会拖慢数据库的响应速度。2、索引越多,更新数据的速度越慢
- 建立合理的索引提高SQL Server的性能在应用系统中,尤其在联机事务处理系统中,对数据查询及处理速度已成为衡量应用系统成败的标准。而采用
- 之前就见过很多网站在侧边栏上使用<dl />标签对来完成侧边栏栏目的布局,最近在研究DEDECMS的默认模板时,也发现该模板在大
- 1 The syntax of the SQL statement is verified.SQL的语法检查2 The data dicti
- [root@vm1 ~]# rpm -ivh groundwork-foundation-pro-1.6.1-67.noarch.rpm P
- 最近论坛里总有人问幻灯片怎么从数据库里取数据,花了几分钟简单的写了下。用到的人可以自己在细化<%dim rs,sqlset&
- 不知大家对精华区的表格排序终极优化是否还有记忆,当时讨论的结果曾以为是最快的JS排序了,实则不然,按前段时间我发的DHTML性能提升帖(转译
- 好多网友问起来,·深度学习网址导航·深度学习整站系统 的后台管理能否增加批量删除功能,如何加:就是列出N篇文章或网址信息,每篇文章或网址前有
- 一个不错的文字放大特性源码。效果图:运行代码框<script for=document event=onmousemove>//
- 一、数字类型所谓的“数字类”,就是指 DECIMAL 和 NUMERIC,它们是同一种类型。它严格的
- 在经过前面几个部分的操作之后,我们的网页已经图文并茂,具有相当的效果了,但是这对于网页来说还不够,为了网站中的众多网页能够成为一个有机的整体
- 和网友们讨论了数组取交集的方法,下面是两个实现arr1=["1","5","6"
- 2003年以来,网页的平均尺寸已经增长3倍。从2003到2008,网页的平均尺寸从93.7K增至312K,增幅233%。同时,在这5年之内,