1.创建一个CSS样式,用于显示loading动画。
<style lang="less" scoped>
.loading {
position: fixed;
z-index: 999;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.bg {
display: flex;
justify-content: center;
align-items: center;
width: 104px;
height: 104px;
background: url(@/assets/img/home/loading-bg.png) 0 0 / 100% 100%;
img {
width: 70px;
height: 70px;
margin-bottom: 8px;
}
}
</style>
2.在HTML文件中添加loading元素:
<template>
<div class="loading" v-if="mainStore.isLoading" @click="loadingClick">
<div class="bg">
<img src="@/assets/img/home/full-screen-loading.gif" alt="" />
</div>
</div>
</template>
3.使用JavaScript,在页面加载完成后,隐藏loading元素:
<script setup>
//1.引入main.js
import useMainStore from "@/stores/modules/main";
const mainStore = useMainStore();
const loadingClick = () => {
mainStore.isLoading = false;
};
4.开发利用的是组件化开发,在main.js中存储的是数据(状态管理,使用的是pinia)
import { defineStore } from "pinia";
const useMainStore = defineStore("mian", {
state: () => ({
isLoading: true,
)},
});
export default useMainStore;
5.在request.js接口请求和响应拦截时做处理
import axios from "axios";
import { BASE_URL, TIMEOUT } from "./config";
import useMainStore from "@/stores/modules/main";
const mainStore = useMainStore();
class HYRequest {
constructor(baseURL, timeout = 10000) {
this.instance = axios.create({
baseURL,
timeout,
});
// Loading加载显示与隐藏 第二种写法拦截请求
//请求之前拦截
this.instance.interceptors.request.use(
(config) => {
mainStore.isLoading = true;
return config;
},
(err) => {
return err;
}
);
// 响应之前拦截
this.instance.interceptors.response.use(
(res) => {
mainStore.isLoading = false;
return res;
},
(err) => {
mainStore.isLoading = false;
return err;
}
);
}
request(config) {
mainStore.isLoading = true;
return new Promise((resolve, reject) => {
this.instance
.request(config)
.then((res) => {
resolve(res.data);
// 第一种写法:Loading加载显示与隐藏
// 请求结束后设置为false
mainStore.isLoading = false;
})
.catch((err) => {
reject(err);
mainStore.isLoading = false;
});
});
}
get(config) {
return this.request({ ...config, method: "get" });
}
post(config) {
return this.request({ ...config, method: "post" });
}
}
export default new HYRequest(BASE_URL, TIMEOUT);