在Vue中，我們常常會寫很多的組件，而這些組件可能會有很多重復的操作和邏輯。為了避免這些重復代碼的出現，我們可以對Vue進行封裝，讓代碼更加簡潔、高效。

Vue的封裝可以說是非常靈活的，可以根據具體的項目需求來進行封裝。而其中一個非常常見的封裝就是及時用。

什么是及時用呢？簡單來說，就是在Vue組件中，進行異步請求時，會有一個延遲，我們希望在這個延遲時，頁面會有一個反饋，告訴用戶請求正在進行中。這時候，我們就可以運用及時用的封裝。

// components/loading.js
<template>
<div class="loading-container" v-if="show">
<div class="loading-animation"></div>
<div class="loading-text">{{ message }}</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false, // 控制loading組件的顯示和隱藏
message: '數據加載中...', // loading時的文字提示
};
},
methods: {
showLoading() { // 顯示loading
this.show = true;
},
hideLoading() { // 隱藏loading
this.show = false;
},
},
};
</script>

首先，我們需要先在組件中定義一個loading組件，這個組件包含了loading的樣式和文字提示。同時，我們還需要在組件中定義兩個方法，一個用來顯示loading，一個用來隱藏loading。

// utils/interceptor.js
import loading from '../components/loading';
// 給axios添加一個請求攔截器
axios.interceptors.request.use(function(config) {
loading.showLoading();
return config;
}, function(error) {
return Promise.reject(error);
});
// 給axios添加一個響應攔截器
axios.interceptors.response.use(function(response) {
loading.hideLoading();
return response;
}, function(error) {
loading.hideLoading();
return Promise.reject(error);
});

接下來，我們需要添加一個請求攔截器和一個響應攔截器，在請求攔截器中，我們使用loading組件的showLoading方法，來顯示loading。在響應攔截器中，我們使用loading組件的hideLoading方法，來隱藏loading。

最后，我們需要在Vue的入口文件main.js中，將loading組件掛載到全局變量中。

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import loading from './components/loading'; // 引入loading組件
Vue.config.productionTip = false;
Vue.prototype.$loading = loading; // 將loading組件掛載到Vue對象上
new Vue({
router,
store,
render: (h) =>h(App),
}).$mount('#app');

這樣，在我們每次發起異步請求時，就可以直接使用Vue實例的$loading.showLoading()來顯示loading了。

總結一下：

通過對Vue進行及時用封裝，我們實現了異步請求時的自定義loading效果。該封裝是基于Vue組件和axios攔截器來實現的。我們可以在每次發起異步請求時，直接調用Vue實例的$loading.showLoading方法來觸發loading組件的顯示，從而給用戶一個順暢的體驗。