[useInfiniteScroll] 当 reload 失败时，不会清空 data

[fkworld]

Describe the bug

当 reload 失败时，不会清空 data

我查看了源码，是因为 data 是手动维护的(finalData)，当调用 reload(run) 时，如果 const currentData = await service(lastData); 出错，此时并不会操作 finalData。

  const { loading, run, runAsync, cancel } = useRequest(
    async (lastData?: TData) => {
      const currentData = await service(lastData);

      if (!lastData) {
        finalData.value = currentData;
      } else {
        finalData.value = {
          ...currentData,

          list: [...lastData.list, ...currentData.list],
        };
      }
      return currentData;
    }

我还查看了 ahooks 的源码，发现也一样没有操作，不知道这是不是预期中的行为？

  const { loading, error, run, runAsync, cancel } = useRequest(
    async (lastData?: TData) => {
      const currentData = await service(lastData);
      if (!lastData) {
        setFinalData({
          ...currentData,
          list: [...(currentData.list ?? [])],
        });
      } else {
        setFinalData({
          ...currentData,
          list: isScrollToTop
            ? [...currentData.list, ...(lastData.list ?? [])]
            : [...(lastData.list ?? []), ...currentData.list],
        });
      }
      return currentData;
    },

Steps to reproduce

示例代码如下：

<template>
  <div>
    <div style="height: 100px; display: flex; align-items: center; justify-content: center">isError: {{ isError }}</div>
    <div
      v-for="item in data?.list"
      :key="item"
      style="padding: 12px; border: 1px solid #f5f5f5; text-align: center"
    >
      {{ item }}
    </div>
    <div style="display: flex; gap: 16px">
      <button @click="reloadSuccess">reload success</button>
      <button @click="reloadError">reload error</button>
      <button @click="clear">clear</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useInfiniteScroll } from "vue-hooks-plus";

const isRequestSuccess = ref(true);

const isError = ref(false);

const { data, mutate, reload } = useInfiniteScroll<{ list: number[] }>(
  async () => {
    if (isRequestSuccess.value) {
      return { list: [1, 2, 3, 4, 5] };
    } else {
      throw new Error("reload 异常");
    }
  },
  {
    manual: true,
    onSuccess: () => {
      isError.value = false;
    },
    onError: () => {
      isError.value = true;
    },
  },
);

function reloadSuccess() {
  isRequestSuccess.value = true;
  reload();
}

function reloadError() {
  isRequestSuccess.value = false;
  reload();
}

function clear() {
  mutate({ list: [] });
}
</script>

System Info

- macos 15.4.1
- chrome 139.0.7258.67 (arm64)

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct.
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueHooks Plus issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[github-actions]

Thank you for your contribution. We will check and reply to you as soon as possible.

[NelsonYong]

@fkworld 里面做了缓存，当 error 的时候会优先展示缓存，保证页面可以正常展示。如果你希望在报错的时候页面显示为空，应该判断是否是 isError ，如果存在错误，应该展示错误的 UI 。

如果还有其他疑问，欢迎补充。

[fkworld]

@NelsonYong 在我的使用场景中，区分了「首次 error 状态」与「后续 error 状态」；

我目前的判断方式是通过创建两个值来判定：

/** 是否为错误状态 */
const isError = ref(false);
/** 是否为空状态 */
const isEmpty = computed(() => !data.value?.list || data.value.list.length === 0);

在 reload 发生错误后，我认为应该处于「首次 error 状态」，不过由于 list 数据的缓存问题，此时 isEmpty 并不为 true，导致判断失败。

	首次 error 状态	后续 error 状态
含义	数据首次请求发生错误	数据后续请求发生错误
展示逻辑	展示 error 状态图标	展示缓存的数据 + 重试按钮
数据判断逻辑	isError && isEmpty	isError && !isEmpty
示意图

[NelsonYong]

@fkworld 如果你希望 reload 都认为它是首次错误的话，目前比较好解决的方式是使用 reloadAsync 处理， reloadAsync 需要你自行捕获请求错误，那么就可以在里面捕获你业务需要的首次错误，使用一个变量记忆一下即可。

[XiaoDaiGua-Ray]

@fkworld 如果希望有首次错误捕获，可以自己编写一个插件维护一个变量状态值即可实现。

[fkworld]

@NelsonYong @XiaoDaiGua-Ray 感谢，我明白了。