错误重试

在应用程序中，暂时性错误其实是很常见的，例如：接口服务器与数据库服务器的连接暂时断开，或者用户端网络暂时发生故障。这些故障往往都会在短时间内自行修正，如果能在延迟合适的时间后再尝试，该请求可能会成功。

现在你可以通过简单的配置，让 VueRequest 帮你处理这件事。只需要提供一个 errorRetryCount 来告诉我们重试的次数。正如下面的例子

Switch button to mock success request or error request

Error

Success

init

<template>
  <NSpace vertical>
    <span>Switch button to mock success request or error request</span>
    <NSpace justify="space-between">
      <NRadioGroup v-model:value="isErrorRequest">
        <NRadioButton key="error" :value="1"> Error </NRadioButton>
        <NRadioButton key="success" :value="0"> Success </NRadioButton>
      </NRadioGroup>
      <NButton type="primary" @click="handleClick"> Run </NButton>
    </NSpace>
    <NSpin :show="loading">
      <NAlert :type="hasError ? 'error' : 'success'">
        <span v-if="hasError">
          {{ `${6 - errorCount} retries left` }}
          <span v-if="needRetry">, waiting for retry </span>
        </span>
        <span v-else>
          {{ data }}
        </span>
      </NAlert>
    </NSpin>
  </NSpace>
</template>

<script lang="ts">
import {
  createDiscreteApi,
  NAlert,
  NButton,
  NRadioButton,
  NRadioGroup,
  NSpace,
  NSpin,
} from 'naive-ui';
import { computed, defineComponent, ref, watch } from 'vue';
import { useRequest } from 'vue-request';
let error = true;

function testService() {
  return new Promise<string>((resolve, reject) => {
    if (error) {
      setTimeout(() => {
        reject('Request failed');
      }, 2000);
    } else {
      setTimeout(() => {
        resolve('✿✿ヽ(°▽°)ノ✿ Successfuly');
      }, 1000);
    }
  });
}
export default defineComponent({
  name: 'App',
  components: {
    NRadioGroup,
    NRadioButton,
    NButton,
    NSpace,
    NSpin,
    NAlert,
  },
  setup() {
    const errorCount = ref(0);
    const isErrorRequest = ref(1);
    const { message } = createDiscreteApi(['message']);

    const {
      data,
      error: hasError,
      loading,
      run,
    } = useRequest(testService, {
      errorRetryCount: 5,
      initialData: 'init',
      onError: () => {
        message.error('(⊙︿⊙) something error');
        errorCount.value++;
      },
      onSuccess: () => {
        message.success('✿✿ヽ(°▽°)ノ✿ success');
        errorCount.value = 0;
      },
    });

    const handleClick = () => {
      errorCount.value = 0;
      run();
    };

    watch(isErrorRequest, val => {
      error = Boolean(val);
    });

    return {
      handleClick,
      needRetry: computed(() => errorCount.value !== 0 && errorCount.value < 6),
      isErrorRequest,
      errorCount,
      loading,
      data,
      hasError,
    };
  },
});
</script>

<style scoped lang="scss"></style>

重试次数

import { useRequest } from 'vue-request';

const { data } = useRequest(getUser, {
  errorRetryCount: 5, // it will retry 5 times
});

重试间隔时间

提示

默认情况下，我们将会使用 二进制指数退避算法在新窗口打开 来帮你计算出合适的间隔时间

当然，你也可以提供 errorRetryInterval 来设定重试的间隔时间

import { useRequest } from 'vue-request';

const { data } = useRequest(getUser, {
  errorRetryCount: 5, // it will retry 5 times
  errorRetryInterval: 3 * 1000, // The retry interval is 3 seconds
});