重慶分公司
重慶分公司，新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
mpvue中使用flyjs全局攔截的實現代碼
我們安裝好flyio之后
10年積累的成都網站建設、成都網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站制作后付款的網站建設流程，更有六盤水免費網站建設讓你可以放心的選擇與我們合作。
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
}
)以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。
當前名稱：mpvue中使用flyjs全局攔截的實現代碼
網頁鏈接：http://www.xueling.net.cn/article/iechpi.html