mpvue中使用flyjs全局拦截

Posted 2021-01-03 周十发

mpvue全局属性设置，在我之前的文章中有介绍，今天想记录的就是怎么和Fly.js结合使用来实现全局拦截功能：

首先我们要安装好Flyio，在mpvue项目中我们用npm下载安装：

npm install flyio

找到src文件夹下面的main.js文件（就在src下）

引入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