封裝axios加載影片Loding——vuex+axios攔截器
前言：我們在axios發送請求時候，會存在請求等待時長，我們一般會加一個影片，如果很多個時候一個一個的加影片代碼看起來很臃腫很冗余，我們寫起來也很麻煩，所以為了更好的寫代碼，把影片封裝在axios中請求前打開影片，請求后關閉影片就實作了Loding加載的效果
下面通過樣例演示如何封裝一個帶 loading 效果的 Axios 組件，它能夠對請求和回應進行攔截從而實作 loading 的自動顯示與隱藏，
兩種方法搭配
(1) vue+element
(2) vue+vuex+自己封裝的影片組件
此文章講第二種方法
一、創建一個vue組件名字為Loading（影片組件，按照自己喜好來）
<template>
<div ref="loader" class="loaderfather" v-show="isShowLoader">
<div class="loader">Loading...</div>
</div>
</template>
<script>
export default {
name: "Loader",
data() {
return {};
},
props: {
isShowLoader: {
type: Boolean,
default () {
false;
},
},
},
methods: {},
};
</script>
<style>
.loaderfather {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 20000;
}
.loader {
margin: auto;
font-size: 20px;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
text-indent: 9999em;
animation: load-effect 1s infinite linear;
}
@keyframes load-effect {
0% {
box-shadow:
/* 0:左移3em -3em:下移2em 0:模糊距離0，即純色 .2em:外擴.2em #504f4e:白色 */
0 -3em 0 0.2em #504f4e,
/*上*/
2em -2em 0 0 #504f4e,
/*右上*/
3em 0 0 -0.5em #504f4e,
/*右*/
2em 2em 0 -0.5em #504f4e,
/*右下*/
0 3em 0 -0.5em #504f4e,
/*下*/
-2em 2em 0 -0.5em #504f4e,
/*左下*/
-3em 0 0 -0.5em #504f4e,
/*左*/
-2em -2em 0 0 #504f4e;
/*左上*/
}
12.5% {
box-shadow: 0 -3em 0 0 #504f4e, 2em -2em 0 0.2em #504f4e, 3em 0 0 0 #504f4e,
2em 2em 0 -0.5em #504f4e, 0 3em 0 -0.5em #504f4e,
-2em 2em 0 -0.5em #504f4e, -3em 0 0 -0.5em #504f4e,
-2em -2em 0 -0.5em #504f4e;
}
37.5% {
box-shadow: 0 -3em 0 -0.5em #504f4e, 2em -2em 0 -0.5em #504f4e,
3em 0 0 0 #504f4e, 2em 2em 0 0.2em #504f4e, 0 3em 0 0 #504f4e,
-2em 2em 0 -0.5em #504f4e, -3em 0 0 -0.5em #504f4e,
-2em -2em 0 -0.5em #504f4e;
}
50% {
box-shadow: 0 -3em 0 -0.5em #504f4e, 2em -2em 0 -0.5em #504f4e,
3em 0 0 -0.5em #504f4e, 2em 2em 0 0 #504f4e, 0 3em 0 0.2em #504f4e,
-2em 2em 0 0 #504f4e, -3em 0 0 -0.5em #504f4e, -2em -2em 0 -0.5em #504f4e;
}
62.5% {
box-shadow: 0 -3em 0 -0.5em #504f4e, 2em -2em 0 -0.5em #504f4e,
3em 0 0 -0.5em #504f4e, 2em 2em 0 -0.5em #504f4e, 0 3em 0 0 #504f4e,
-2em 2em 0 0.2em #504f4e, -3em 0 0 0 #504f4e, -2em -2em 0 -0.5em #504f4e;
}
75% {
box-shadow: 0 -3em 0 -0.5em #504f4e, 2em -2em 0 -0.5em #504f4e,
3em 0 0 -0.5em #504f4e, 2em 2em 0 -0.5em #504f4e, 0 3em 0 -0.5em #504f4e,
-2em 2em 0 0 #504f4e, -3em 0 0 0.2em #504f4e, -2em -2em 0 0 #504f4e;
}
87.5% {
box-shadow: 0 -3em 0 0 #504f4e, 2em -2em 0 -0.5em #504f4e,
3em 0 0 -0.5em #504f4e, 2em 2em 0 -0.5em #504f4e, 0 3em 0 -0.5em #504f4e,
-2em 2em 0 0 #504f4e, -3em 0 0 0 #504f4e, -2em -2em 0 0.2em #504f4e;
}
100% {
box-shadow: 0 -3em 0 0.2em #504f4e, 2em -2em 0 0 #504f4e,
3em 0 0 -0.5em #504f4e, 2em 2em 0 -0.5em #504f4e, 0 3em 0 -0.5em #504f4e,
-2em 2em 0 -0.5em #504f4e, -3em 0 0 -0.5em #504f4e, -2em -2em 0 0 #504f4e;
}
}
</style>
二、創建一個store.js檔案引入vuex
import {createStore} from 'vuex'
// Create a new store instance.
const store = createStore({
getters: {},
state: {
loadingShow: true,
},
mutations: {
showLoading(state) {
state.loadingShow = true
},
hideLoading(state) {
state.loadingShow = false
}
},
actions: {},
})
export default store
之前我們經常看到vuex運行是下邊代碼
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
skin: 'HH',
loadingShow: true,
},
mutations: {
changeSkin (state, str) {
state.skin = str
},
showLoading (state) {
state.loadingShow = true
},
hideLoading (state) {
state.loadingShow = false
}
},
actions: {
}
})
為什么我們不這么干，因為我們用的是vue3.0版本，所以我們創建import {createApp} from 'vue’
得到的是一個函式，然后引數為根組件APP時候創建出來的，而我們如果直接**import Vue from
‘vue’，**得到的是undefined
那么vuex此時應該選擇哪個版本？
4.0
為什么？
如果選擇3.幾版本那么我們參考是 import Vuex from ‘vuex’ 但是有一個問題，此時需要Vue.use(vuex),這個時候的Vue已經是一個實體了，但是我們vue3中，是引入的一個建構式createApp
所以要采用vuex4.0版本，然后直接 import {createStore} from 'vuex’
如果你的vue版本是2那么第二種沒毛病，如果vue版本是3則第一種
（當然這也是個人觀點，如有建議請留言及時更正）
三、創建一個http.js檔案，引入axios然后封裝
import axios from 'axios'
import store from '../../store'
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發送請求之前做些什么
// 呼叫store showLoading方法
store.commit('showLoading')
console.log('loading...')
return config;
}, function (error) {
// 對請求錯誤做些什么
store.commit('hideLoading')
return Promise.reject(error);
});
// 添加回應攔截器
axios.interceptors.response.use(function (response) {
// 對回應資料做點什么
// 呼叫store hideLoading方法
store.commit('hideLoading')
console.log('end...')
return response;
}, function (error) {
// 對回應錯誤做點什么
store.commit('hideLoading')
return Promise.reject(error);
});
四、在的main.js中引入vue和根組件
import {createApp} from 'vue'
import App from './App.vue'
import axioshttp from './http'//參考http封裝的axios組件
import store from "./store"
var app = createApp(App)
app.use(store)//綁在app上
app.config.globalProperties.$axios = axioshttp ;
app.config.globalProperties.$app = app;
app.mount('#app')
提示：
import {createApp} from 'vue’是vue3.0版本內容
createApp方法可以回傳一個提供應用背景關系的應用實體，應用實體掛載的整個組件樹共享同一個背景關系，vue3中的createApp方法進行實體創建，和vue2的區別自己看
import axioshttp from ‘./http’//參考http封裝的axios組件
app.config.globalProperties.$axios = axioshttp ;
此時我們把Loading組件參考到根組件下即可
<Loading :isShowLoader="this.$store.state.loadingShow"></Loading>
this.$store.state.loadingShow就是我們vuex定義的全域的狀態管理變數
中間是圓圈打轉轉，截圖有點快，不完整，湊合看吧，可以把影片復制下來看一下！
下一篇文章講一下簡單的element+vue簡單的封裝———— # take root_80
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/276656.html
標籤：其他