微信小程序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 相关文章推荐
一个简单的js树形菜单
Dec 09 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
Vue Socket.io源码解读
Feb 07 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
大数据分析用java还是Python
2020/07/06 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
说明书范文
2014/05/07 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
导游带团欢迎词
2015/09/30 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书