以 Vue 3 项目为例，多个请求下如何全局封装 Loading 的展示与关闭？其中大有学问！

CodeQi技术小栈

已于 2024-07-03 10:02:33 修改

阅读量978

点赞数 4

分类专栏： # Vuejs 文章标签： javascript 前端 vue.js

于 2024-06-29 15:49:13 首次发布

本文链接：https://blog.youkuaiyun.com/SWQ4520/article/details/140065511

版权

Vuejs 专栏收录该内容

20 篇文章

订阅专栏

大家好，我是CodeQi！

项目开发中，Loading 的展示与关闭是非常关键的用户体验设计。

当我们的应用需要发起多个异步请求时，如何有效地管理全局 Loading 状态，保证用户在等待数据加载时能有明确的反馈，这是一个值得深入探讨的问题。

本文将以 Vue 3 项目为例，详细讲解如何全局封装 Loading 的展示与关闭。

一、准备工作

首先，我们需要创建一个新的 Vue 3 项目。如果你还没有安装 Vue CLI，请先安装：

npm install -g @vue/cli

然后创建并进入新项目：

vue create loading-demo
cd loading-demo

确保你的项目中已经安装了 Vue 3 和 Vue CLI。

我们将使用 <script setup> 的写法来实现全局 Loading 组件。

二、封装全局 Loading 组件

1. 创建全局 Loading 组件

首先，我们在 src/components 目录下创建一个名为 GlobalLoading.vue 的组件文件：

<!-- src/components/GlobalLoading.vue -->
<template>
  <div v-if="visible" class="global-loading">
    <div class="spinner"></div>
  </div>
</template>

<script setup>
import { ref }from'vue'

// 定义一个可响应的变量来控制 Loading 的可见性
const visible =ref(false)

// 导出显示和隐藏 Loading 的方法
exportconstshowGlobalLoading=()=>{ visible.value=true}
exportconsthideGlobalLoading=()=>{ visible.value=false}
</script>

<style scoped>
.global-loading {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
background:rgba(255,255,255,0.8);
z-index:9999;
}
.spinner{
border:4px solid rgba(0,0,0,0.1);
border-left-color:#22a6b3;
border-radius:50%;
width:40px;
height:40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>

2. 在 `main.js` 中注册全局组件

我们需要在项目入口文件 main.js 中注册全局 Loading 组件：

// src/main.js
import{ createApp }from'vue'
importAppfrom'./App.vue'
importGlobalLoading,{ showGlobalLoading, hideGlobalLoading }from'./components/GlobalLoading.vue'

const app =createApp(App)

// 注册全局组件
app.component('GlobalLoading',GlobalLoading)

app.mount('#app')

export{ showGlobalLoading, hideGlobalLoading }

3. 在 App.vue 中使用全局 Loading 组件

在 src/App.vue 文件中，我们可以使用封装好的全局 Loading 组件：

<!-- src/App.vue -->
<template>
<div id="app">
<h1>Vue 3 Global Loading Example</h1>
<GlobalLoading />
<button @click="fetchData">Fetch Data</button>
</div>
</template>

<script setup>
import { showGlobalLoading, hideGlobalLoading }from'./main.js'
import axios from'axios'

// 模拟数据请求
constfetchData=async()=>{
try{
showGlobalLoading()
// 模拟多个请求
const requests =[
      axios.get('https://jsonplaceholder.typicode.com/posts/1'),
      axios.get('https://jsonplaceholder.typicode.com/posts/2')
]
awaitPromise.all(requests)
}catch(error){
console.error(error)
}finally{
hideGlobalLoading()
}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

三、使用 Axios 拦截器处理全局 Loading 状态

当我们的应用中有多个请求时，可以通过 Axios 拦截器来自动处理全局 Loading 的展示与关闭。

1. 配置 Axios 拦截器

在 src 目录下创建一个名为 axios.js 的文件：

// src/axios.js
import axios from'axios'
import{ showGlobalLoading, hideGlobalLoading }from'./main.js'

// 请求计数器
let requestCount =0

constshowLoading=()=>{
if(requestCount ===0){
showGlobalLoading()
}
  requestCount++
}

consthideLoading=()=>{
  requestCount--
if(requestCount ===0){
hideGlobalLoading()
}
}

// 请求拦截器
axios.interceptors.request.use(
config =>{
showLoading()
return config
},
error =>{
hideLoading()
returnPromise.reject(error)
}
)

// 响应拦截器
axios.interceptors.response.use(
response =>{
hideLoading()
return response
},
error =>{
hideLoading()
returnPromise.reject(error)
}
)

exportdefault axios

2. 在 App.vue 中使用配置好的 Axios

在 src/App.vue 文件中，我们可以使用配置好的 Axios 进行数据请求：

<!-- src/App.vue -->
<template>
<div id="app">
<h1>Vue 3 Global Loading with Axios Interceptors</h1>
<GlobalLoading />
<button @click="fetchData">Fetch Data</button>
</div>
</template>

<script setup>
import axios from'./axios.js'

// 模拟数据请求
constfetchData=async()=>{
try{
// 模拟多个请求
const requests =[
      axios.get('https://jsonplaceholder.typicode.com/posts/1'),
      axios.get('https://jsonplaceholder.typicode.com/posts/2')
]
awaitPromise.all(requests)
}catch(error){
console.error(error)
}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

四、优化和拓展

1. 优化 Loading 组件

我们可以对 Loading 组件进行一些优化，例如增加自定义颜色和大小的支持：

<!-- src/components/GlobalLoading.vue -->
<template>
  <div v-if="visible" class="global-loading">
    <div :class="spinnerClass" :style="spinnerStyle"></div>
  </div>
</template>

<script setup>
import { ref, computed }from'vue'

// 定义一个可响应的变量来控制 Loading 的可见性
const visible =ref(false)
const color =ref('#22a6b3')
const size =ref('40px')

// 导出显示和隐藏 Loading 的方法
exportconstshowGlobalLoading=(spinnerColor = '#22a6b3', spinnerSize = '40px')=>{
  color.value= spinnerColor
  size.value= spinnerSize
  visible.value=true
}
exportconsthideGlobalLoading=()=>{ visible.value=false}

const spinnerClass =computed(() =>({
spinner:true
}))

const spinnerStyle =computed(() =>({
borderColor:`rgba(0, 0, 0, 0.1)`,
borderLeftColor: color.value,
width: size.value,
height: size.value
}))
</script>

<style scoped>
.global-loading {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
background:rgba(255,255,255,0.8);
z-index:9999;
}
.spinner{
border:4px solid;
border-radius:50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>

2. 在请求中使用自定义颜色和大小

在 src/App.vue 文件中，我们可以使用自定义颜色和大小的全局 Loading 组件：

<!-- src/App.vue -->
<template>
  <div id="app">
<h1>Vue3CustomizableGlobalLoadingExample</h1>
<GlobalLoading />
<button @click="fetchData">FetchData</button>
</div>
</template>

<script setup>
import axios from './axios.js'
import{ showGlobalLoading, hideGlobalLoading } from './main.js'

// 模拟数据请求
const fetchData = async ()=>{
try{
    showGlobalLoading('#e74c3c','60px')
// 模拟多个请求
const requests =[
      axios.get('https://json

placeholder.typicode.com/posts/1'),
      axios.get('https://jsonplaceholder.typicode.com/posts/2')
]
    await Promise.all(requests)
}catch(error){
    console.error(error)
} finally {
    hideGlobalLoading()
}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>