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

我们安装好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 FlyVue.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 })