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

 更新时间:2019年07月09日 16:49:18   作者:这麻雀   我要评论

这篇文章主要介绍了微信小程序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, '成功')
   }
  })

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

相关文章

  • JavaScript Event学习补遗 addEventSimple

    JavaScript Event学习补遗 addEventSimple

    这里有个addEventSimple和removeEventSimple函数,有时候需要不那么显眼的事件处理程序的时候我就用这两个函数注册。
    2010-02-02
  • Javascript学习笔记-详解in运算符

    Javascript学习笔记-详解in运算符

    in运算符是javascript语言中比较特殊的一个,可以单独使用作为判断运算符,也常被用于for...in循环中遍历对象属性
    2011-09-09
  • JavaScript实现时钟滴答声效果

    JavaScript实现时钟滴答声效果

    本文给大家分享一段js实例代码实现时钟滴答声效果,效果逼真,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • JavaScript表单验证的两种实现方法

    JavaScript表单验证的两种实现方法

    这篇文章主要为大家详细介绍了JavaScript表单验证的两种实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • javascript消除window.close()的提示窗口

    javascript消除window.close()的提示窗口

    有人问起,怎么去掉js调用window.close()时怎么去掉那可恶的提示,咋一看好像还真不好弄,IE的安全机制好像就不允许通过脚本关闭本页面,但是IE好像可以允许js关闭弹出窗口,那我们是不是可以通过一定的技巧欺骗一下IE,绕过去呢。鼓捣了几下,似乎还真可以做到
    2015-05-05
  • JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    这篇文章主要介绍了JS实现PC手机端和嵌入式滑动拼图验证码三种效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • 用JavaScript隐藏控件的方法

    用JavaScript隐藏控件的方法

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。
    2009-09-09
  • JavaScript插件Tab选项卡效果

    JavaScript插件Tab选项卡效果

    这篇文章主要为大家详细介绍了JavaScript插件Tab选项卡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 用ES6写全屏滚动插件的示例代码

    用ES6写全屏滚动插件的示例代码

    本篇文章主要介绍了用ES6写全屏滚动插件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 微信小程序时间戳转日期的详解

    微信小程序时间戳转日期的详解

    这篇文章主要介绍了微信小程序时间戳转日期,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论