微信小程序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实现等比例缩放图片效果插件
Jul 24 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
js字符串转成JSON
2013/11/07 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python 实现try重新执行
2019/12/21 Python
Python进行特征提取的示例代码
2020/10/15 Python
python中append函数用法讲解
2020/12/11 Python
致裁判员加油稿
2014/02/08 职场文书
双创工作实施方案
2014/03/26 职场文书
档案保密承诺书
2014/06/03 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
三好学生评语大全
2014/12/29 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL