我們安裝好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 })以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
