微信小程序wx.request拦截器使用详解


Posted in Javascript onJuly 09, 2019

一.

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

首先我们通过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, '成功')
   }
  })

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

Javascript 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
JavaScript闭包详解
Feb 02 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
require.js的用法详解
Oct 20 Javascript
js实现交通灯效果
Jan 13 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JS重学系列之聊聊new操作符
Mar 04 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
javascript实现图片轮播代码
Jul 09 #Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 #Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 #Javascript
Vue 实现前端权限控制的示例代码
Jul 09 #Javascript
微信小程序文章详情页跳转案例详解
Jul 09 #Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 #Javascript
js实现无缝滚动双图切换效果
Jul 09 #Javascript
You might like
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
利用static实现表格的颜色隔行显示
2006/10/09 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
Python冲顶大会 快来答题!
2018/01/17 Python
对numpy中shape的深入理解
2018/06/15 Python
Python理解递归的方法总结
2019/01/28 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
幼儿园新年寄语
2014/04/03 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
四则混合运算教学反思
2016/02/23 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书