useLoading()

帮助追踪命令式异步函数的加载与错误状态。

提示

对于 GET/读取类 endpoint，useSuspense() 或 useDLE() 更合适。

用法

PostResource

PostDetail.vue

PostForm.vue

PostCreate.vue

Navigation.vue

<script setup lang="ts">
  import { useLoading, useController } from '@data-client/vue';
  import { PostResource } from './PostResource';
  import PostForm from './PostForm.vue';

  const emit = defineEmits<{ navigateToPost: [id: number] }>();
  const ctrl = useController();
  // highlight-start
  const [handleSubmit, loading, error] = useLoading(
    async (data: FormData) => {
      const post = await ctrl.fetch(PostResource.getList.push, data);
      emit('navigateToPost', post.id);
    },
  );
  // highlight-end
</script>

<template>
  <PostForm @submit="handleSubmit" :loading="loading" :error="error" />
</template>

返回包装后的函数，以及 loading 和 error 两个 ref。包装后的函数是稳定的，因此不需要依赖列表：它读取的任何 ref 或 props 都会在调用时读取。

类型

export default function useLoading<
  F extends (...args: any) => Promise<any>,
>(func: F): [F, Ref<boolean>, Ref<Error | undefined>];

在返回的 promise 处于 pending 状态时，loading 为 true。如果 func reject，该 rejection 会被捕获并存入 error；下次调用时会再次被清除。

示例

创建 Todo

探索 vue-todo-app 示例

在 StackBlitz 中打开查看源码

更多演示

用法​

类型​

示例​

创建 Todo​

用法

类型

示例

创建 Todo