yudao-ui-admin-vben/playground/src/views/demos/features/vue-query/query-retries.vue

<script setup lang="ts">
import { ref } from 'vue';

import { useQuery } from '@tanstack/vue-query';
import { Button } from 'ant-design-vue';

const count = ref(-1);
async function fetchApi() {
  count.value += 1;
  return new Promise((_resolve, reject) => {
    setTimeout(() => {
      reject(new Error('something went wrong!'));
    }, 1000);
  });
}

const { error, isFetching, refetch } = useQuery({
  enabled: false, // Disable automatic refetching when the query mounts
  queryFn: fetchApi,
  queryKey: ['queryKey'],
  retry: 3, // Will retry failed requests 3 times before displaying an error
});

const onClick = async () => {
  count.value = -1;
  await refetch();
};
</script>

<template>
  <Button :loading="isFetching" @click="onClick"> 发起错误重试 </Button>
  <p v-if="count > 0" class="my-3">重试次数{{ count }}</p>
  <p>{{ error }}</p>
</template>