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

简介: 以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!

项目开发中,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>

五、总结

以上便是我对如何在 Vue 3 项目中封装多个请求下全局 Loading 展示与关闭的一些心得与体会。

相关文章
|
19天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
84 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
20天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
83 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
19天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
61 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
23天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
81 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
21天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
78 12
|
1月前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
213 1
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
161 1
|
17天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
17天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
17天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。

热门文章

最新文章