Loading Delay

通过设置 options.loadingDelay ，可以延迟 loading 变成 true 的时间，有效防止闪烁。

const { loading, data } = useRequest(getUsername, {
  loadingDelay: 300,
});

return <div>{loading ? "Loading..." : data}</div>;

例如上面的场景，假如 getUsername 在 300ms 内返回，则 loading 不会变成 true，避免了页面展示 Loading... 的情况。

你可以快速点击下面示例中的按钮以体验效果

data1:

data2:

点击查看代码

<script setup>
import { mockFetchFast } from "@/api";
import { useRequest } from "ahooks-for-vue";

const {
  loading: loading1,
  data: data1,
  run: run1,
} = useRequest(mockFetchFast, {
  loadingDelay: 500,
});
const {
  loading: loading2,
  data: data2,
  run: run2,
} = useRequest(mockFetchFast, {});
const set = (v) => {
  run1();
  run2();
};
</script>
<template>
  <div>
    <button @click="() => set()">run</button>
    <br />
    <br />
    data1: {{ loading1 ? "loading..." : data1 }}
    <br />
    <br />
    data2: {{ loading2 ? "loading..." : data2 }}
  </div>
</template>
<style></style>

轮询错误重试

API

参数	说明	类型	默认值
loadingDelay	设置 loading 变成 true 的延迟时间	number	0

备注

options.loadingDelay 支持动态变化。