fix: improve request logic in api-component

* 修复某些情况下updateParam设置的参数可能不会提交给api的问题
* 修复在上一个请求尚未完成前如果params发生了变更,将不会再触发新的api请求
---------

Co-authored-by: Netfan <netfan@foxmail.com>
This commit is contained in:
lghuahua
2025-06-20 08:42:45 +08:00
committed by GitHub
parent 97b8e28a2b
commit 986eacae9a

View File

@@ -3,11 +3,11 @@ import type { Component } from 'vue';
import type { AnyPromiseFunction } from '@vben/types';
import { computed, ref, unref, useAttrs, watch } from 'vue';
import { computed, nextTick, ref, unref, useAttrs, watch } from 'vue';
import { LoaderCircle } from '@vben/icons';
import { get, isEqual, isFunction } from '@vben-core/shared/utils';
import { cloneDeep, get, isEqual, isFunction } from '@vben-core/shared/utils';
import { objectOmit } from '@vueuse/core';
@@ -104,6 +104,8 @@ const refOptions = ref<OptionsItem[]>([]);
const loading = ref(false);
// 首次是否加载过了
const isFirstLoaded = ref(false);
// 标记是否有待处理的请求
const hasPendingRequest = ref(false);
const getOptions = computed(() => {
const { labelField, valueField, childrenField, numberToString } = props;
@@ -146,18 +148,26 @@ const bindProps = computed(() => {
});
async function fetchApi() {
let { api, beforeFetch, afterFetch, params, resultField } = props;
const { api, beforeFetch, afterFetch, resultField } = props;
if (!api || !isFunction(api) || loading.value) {
if (!api || !isFunction(api)) {
return;
}
// 如果正在加载,标记有待处理的请求并返回
if (loading.value) {
hasPendingRequest.value = true;
return;
}
refOptions.value = [];
try {
loading.value = true;
let finalParams = unref(mergedParams);
if (beforeFetch && isFunction(beforeFetch)) {
params = (await beforeFetch(params)) || params;
finalParams = (await beforeFetch(cloneDeep(finalParams))) || finalParams;
}
let res = await api(params);
let res = await api(finalParams);
if (afterFetch && isFunction(afterFetch)) {
res = (await afterFetch(res)) || res;
}
@@ -177,6 +187,13 @@ async function fetchApi() {
isFirstLoaded.value = false;
} finally {
loading.value = false;
// 如果有待处理的请求,立即触发新的请求
if (hasPendingRequest.value) {
hasPendingRequest.value = false;
// 使用 nextTick 确保状态更新完成后再触发新请求
await nextTick();
fetchApi();
}
}
}
@@ -190,7 +207,7 @@ async function handleFetchForVisible(visible: boolean) {
}
}
const params = computed(() => {
const mergedParams = computed(() => {
return {
...props.params,
...unref(innerParams),
@@ -198,7 +215,7 @@ const params = computed(() => {
});
watch(
params,
mergedParams,
(value, oldValue) => {
if (isEqual(value, oldValue)) {
return;