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编写的第一人称射击游戏
Feb 25 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 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执行速度全攻略(上)
2006/10/09 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
python调用shell的方法
2013/11/20 Python
Python和php通信乱码问题解决方法
2014/04/15 Python
Python3基础之基本运算符概述
2014/08/13 Python
python把1变成01的步骤总结
2019/02/27 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python 内置函数汇总详解
2019/09/16 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python路径的写法及目录的获取方式
2019/12/26 Python
客户代表实习人员自我鉴定
2013/09/27 职场文书
广告业务员岗位职责
2014/02/06 职场文书
读书之星事迹材料
2014/05/12 职场文书
拉拉队口号
2014/06/16 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书