mpvue中使用flyjs全局拦截的实现代码


Posted in Javascript onSeptember 13, 2018

我们安装好flyio之后

npm install flyio

找到src目录下的main.js文件

首先引入flyjs并实例化

var Fly=require("flyio/dist/npm/wx")
var fly=new Fly

比方说我们每次请求我们自己的服务器接口的时候需要带上appID,用户登陆后需要带上openId

// 请求拦截
fly.interceptors.request.use((request)=>{
 
 request.body.appId = 'xxx'
  // 用户的openId在获取之后添加到全局变量中如果存在,我们将它添加到请求参数里面
 let openId = Vue.prototype.globalData.openId;
 if(openId){
  request.body.openId = openId
 }
})

当服务器发生错误,或者用户网络错误导致请求失败的时候,我们可以添加一个响应拦截

// 响应拦截
fly.interceptors.response.use(
 (response) => {
 
 
 },
 (err) => {
  //发生网络错误后会走到这里
  //return Promise.resolve("ssss")
  wx.hideLoading();
  wx.showToast({
   title:'网络不流畅,请稍后再试!',
   icon:'none',
  });
 
 })

最后将flyjs挂载到vue的原型上

// 将fly挂载在Vue的原型上
Vue.prototype.$flyio = fly

不同页面直接使用this.$flyio请求(是不是很方便)

示例:

fly里面的拦截机制还是很强大的,并且在错误返回信息做了优化处理,在fly拦截器中支持执行异步任务,就是说在请求数据的时候如果拦截到token不存在那么我们就可以在拦截器中重新获取token,再接着执行之前的请求。

const Fly = require("flyio/dist/npm/wx")
const fly = new Fly
Vue.prototype.$http = fly;
 
fly.interceptors.request.use((request) => {
 //给所有请求添加自定义header
 if (api.Get('token')) {
  request.timeout = 30000,
   request.headers = {
    "content-type": "application/json",
    "cld.stats.page_entry": api.Get('scene'),
    "version": store.state.version,
    "token": api.Get('token')
   }
  wx.showLoading({
   title: "加载中",
   mask: true,
  });
  return request;
 } else {
  fly.lock();//锁住请求
  return Public.Load().then(res => {
   request.timeout = 30000,
    request.headers = {
     "content-type": "application/json",
     "cld.stats.page_entry": api.Get('scene'),
     "version": store.state.version,
     "token": api.Get('token')
    }
   wx.showLoading({
    title: "加载中",
    mask: true,
   });
    //等待token返回之后在解锁,
   fly.unlock();
   return request;//继续之前的请求,
  })
 }
})
 
fly.interceptors.response.use(
 (response) => {
  wx.hideLoading();
  return response
 },
 (err) => {
  wx.hideLoading();
  if (err.status == 0) {
   return "网络连接异常"
  } else if (err.status == 1) {
   return "网络连接超时"
  } else if (err.status == 401) {
   return "用户未登录"
  } else {
   if (err.response.data.message) {
    return err.response.data.message
   } else {
    return '请求数据失败,请稍后再试'
   }
  };
  // Do something with response error
 }
)

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

Javascript 相关文章推荐
另一个javascript小测验(代码集合)
Jul 27 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
js Calender控件使用详解
Jan 05 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 #Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 #Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 #Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 #Javascript
vue interceptor 使用教程实例详解
Sep 13 #Javascript
Vue点击切换颜色的方法
Sep 13 #Javascript
node中的cookie的具体使用
Sep 13 #Javascript
You might like
PHP 数组实例说明
2008/08/18 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
js select常用操作控制代码
2010/03/16 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python中join函数简单代码示例
2018/01/09 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
django-csrf使用和禁用方式
2020/03/13 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
车间主管岗位职责
2013/11/14 职场文书
公司总经理岗位职责
2015/04/01 职场文书
实习证明模板
2015/06/16 职场文书
董事长开业致辞
2015/07/29 职场文书
计算机教师工作总结
2015/08/13 职场文书