我們安裝好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 })            
新聞熱點
疑難解答
圖片精選