diff --git a/src/api/mock.ts b/src/api/mock.ts index e9a0007..d16c594 100644 --- a/src/api/mock.ts +++ b/src/api/mock.ts @@ -31,23 +31,23 @@ export function getRemoteSelectData() { }) } -export interface IBirdsItem { +export interface IComicsItem { id: number name: string } -export const getBirds = () => { - return new Promise<IBirdsItem[]>((resolve) => { +export const getComics = () => { + return new Promise<IComicsItem[]>((resolve) => { setTimeout(() => { - resolve([...Array(5)].map((_t, index) => ({ id: index, name: `t${index}` }))) + resolve([...Array(5)].map((_t, index) => ({ id: index, name: `c${index}` }))) }, 1000) }) } -export const getCars = (id: number) => { +export const getAnimations = (id: number) => { return new Promise((_resolve, reject) => { setTimeout(() => { - reject(new Error("sorry" + id)) + reject(new Error(`Sorry, there is an error here. The error id is ${id}`)) }, 1000) }) } diff --git a/src/views/hooks/use-fullscreen-loading.vue b/src/views/hooks/use-fullscreen-loading.vue index 6654c50..a8958aa 100644 --- a/src/views/hooks/use-fullscreen-loading.vue +++ b/src/views/hooks/use-fullscreen-loading.vue @@ -6,13 +6,13 @@ </template> <script lang="ts" setup> -import { getBirds, getCars, type IBirdsItem } from "@/api/mock" +import { getComics, getAnimations, type IComicsItem } from "@/api/mock" import { useFullscreenLoading } from "@/hooks/useFullscreenLoading" import { ElMessage } from "element-plus" const querySuccess = async () => { - const birds = await useFullscreenLoading(getBirds)() - ElMessage.success(birds.map((t: IBirdsItem) => t.name).join()) + const comics = await useFullscreenLoading(getComics)() + ElMessage.success("Successfully get comics: " + comics.map((t: IComicsItem) => t.name).join()) } const svg = ` @@ -28,7 +28,7 @@ const svg = ` const queryFailed = async () => { try { - await useFullscreenLoading(getCars, { + await useFullscreenLoading(getAnimations, { text: "自定义加载文字", background: "rgba(255, 214, 210, 0.7)", svg,