侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 3年前   906

一.

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

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

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

您可能感兴趣的文章:

  • 微信小程序设置全局请求URL及封装wx.request请求操作示例
  • 微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
  • 微信小程序使用request网络请求操作实例
  • 微信小程序wx.request实现后台数据交互功能分析
  • 微信小程序网络请求wx.request详解及实例
  • 微信小程序 wx.request(接口调用方式)详解及实例
  • 微信小程序 wx.request合法域名配置详解
  • 微信小程序request请求封装,验签代码实例


  • 上一条:
    关于微信小程序map组件z-index的层级问题分析
    下一条:
    如何自定义微信小程序tabbar上边框的颜色
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客