经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序wx.request拦截器使用详解
来源:jb51  时间:2019/7/10 9:19:57  对本文有异议

一.

请求后台的时候,服务端对每一个请求都会验证权限,而前端也需要对服务器返回的特殊状态码统一处理,所以可以针对业务封装请求。

首先我们通过request拦截器在每个请求头里面塞入token等信息,好让后端对请求进行权限验证。并创建一个respone拦截器,当服务端返回特殊的状态码,我们统一做处理,如未登录网络错误等操作。

二.

1.首先了解小程序官方api-wx.request() ,通过示例可以看出wx.request的参数是一个对象,拥有传输地址,传输内容,响应头,成功失败回调函数等属性和方法,我们可以通过封装相应的响应头和成功失败回调函数达到相应的目的:

  1. // 官方代码示例
  2. wx.request({
  3. url: 'test.php', //仅为示例,并非真实的接口地址
  4. data: {
  5. x: '',
  6. y: ''
  7. },
  8. header: {
  9. 'content-type': 'application/json' // 默认值
  10. },
  11. success (res) {
  12. console.log(res.data)
  13. }
  14. fail(res){
  15. console.log(res)
  16. }
  17. })

2.封装

封装请求头和返回的状态码(注:具体头需要添加哪些属性,返回的状态码处理,是根据与后台实际沟通所需的参数来制定的)

  1. const app = getApp();
  2. const appid = 'xxxx';
  3. const appSecret = 'xxxxxx';
  4. let ajaxNum = 0;
  5.  
  6. // 获取accessToken
  7. function getAccessToken(callback) {
  8. wx.request({
  9. url: '/api/Token',
  10. data: {
  11. appid: aesEncrypt(appid),// aesEncrypt():自定义的用crypto-js.js进行aes加密的方法,这里只需要知道加密了即可,不需要关注此方法
  12. appSecret: aesEncrypt(appSecret),
  13. },
  14. success: function (res) {
  15. if(res.statusCode ===200 && res.data.code === 0) {
  16. let accesstoken = res.data.data.accesstoken;
  17. if (typeof (callback) === 'function' && accesstoken) {
  18. callback(accesstoken);
  19. }
  20. }
  21. },
  22. })
  23. }
  24.  
  25. // 封装request请求
  26. const myRequest = options => {
  27. if(options) {
  28. getAccessToken(function (accesstoken){
  29. // header 设置Content-Type,accesstoken, usertoken, noncestr, timestamp等信息,与后台协商好
  30. if(options.header === undefined || options.header === null) {
  31. options.header = {};
  32. }
  33. options.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
  34. // usertoken在登录后保存在缓存中,所以从缓存中取出,放在header
  35. let usertoken = wx.getStorageSync('usertoken');
  36. if (usertoken) {
  37. options.header['usertoken'] = usertoken;
  38. }
  39. // 自定义getNoncestr()设置随机字符串,getTimestamp()获取时间戳
  40. let noncestr = getNoncestr();
  41. let timestamp = getTimestamp();
  42. // sign进行加密
  43. let sign = getSign(accesstoken, appid, appSecret, noncestr, timestamp);
  44. if (timestamp) {
  45. options.header['timestamp'] = timestamp;
  46. }
  47. if (noncestr) {
  48. options.header['noncestr'] = noncestr;
  49. }
  50. if (sign) {
  51. options.header['sign'] = sign;
  52. }
  53. //url
  54. let baseUrl = config.BASE_HOST;
  55. if (options.url.indexOf('http') != 0) {
  56. options.url = baseUrl + options.url;
  57. }
  58. // method、data
  59. if (options.method === undefined || options.method === null) {
  60. options.method = 'post';
  61. }
  62. if (options.method.toLowerCase() === 'post') {
  63. if(options.data) {
  64. let dataStr = JSON.stringify(options.data);
  65. let base64Str = base64Encrypt(dataStr);
  66. options.data = serializeData({ param: base64Str });
  67. }
  68. }
  69. //success
  70. if (options.success && typeof(options.success) === 'function') {
  71. let successCallback = options.success;
  72. options.success = function(res) {
  73. // 判断不同的返回码 200/404
  74. if (res.statusCode === 200) {
  75. try {
  76. // 接收的后台数据用自定义base64解密方法解密后转为对象
  77. let str = base64Decrypt(res.data);
  78. let data = JSON.parse(str);
  79. if (parseInt(data.resultCode, 10) === -1) {//后台商议好的状态码,-2未登录,-1-3后台出错
  80. console.error('网络超时,请稍后重试');
  81. } else if (parseInt(data.resultCode, 10) === -3) {
  82. console.error(data.msg);
  83. } else if (parseInt(data.resultCode, 10) === -2){
  84. console.log("用户未登录-ajax");
  85. }
  86. res.data = data;
  87. //调用自定义的success
  88. successCallback(res);
  89. } catch (e) {
  90. console.error('出错了,' + e + ',接口返回数据:' + res.data);
  91. }
  92. } else if(res.statusCode === 404) {
  93. console.log('404');
  94. }
  95. }
  96. }
  97. //执行微信的请求
  98. wx.request(options);
  99. });
  100. }
  101. }
  102.  
  103.  
  104. module.exports = {
  105. myRequest: myRequest

页面调用示范(与wx.request传参一致):

  1. const ajax = require('ajax.js');
  2. ajax.javaRequest({
  3. url: '/xxx',
  4. data: {
  5. xxxx: xxx
  6. },
  7. method: 'POST',
  8. success: res => {
  9. console.log(res, '成功')
  10. }
  11. })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号