Browse Source

feat: 禁止数据请求在编辑阶段更新

编辑阶段更新会产生问题
    1. 浏览器和服务的造成没必要的网络资源消耗
    2. 编辑请求参数和请求并存导致正在编辑接口时请求报错
main
betaqi 1 day ago
parent
commit
396ae0eec5
  1. 57
      src/hooks/useChartDataFetch.hook.ts

57
src/hooks/useChartDataFetch.hook.ts

@ -1,4 +1,4 @@
import { ref, toRefs, toRaw, watch } from 'vue' import { ref, toRaw, toRefs, watch } from 'vue'
import type VChart from 'vue-echarts' import type VChart from 'vue-echarts'
import { customizeHttp } from '@/api/http' import { customizeHttp } from '@/api/http'
import { useChartDataPondFetch } from '@/hooks/' import { useChartDataPondFetch } from '@/hooks/'
@ -6,14 +6,13 @@ import {
RequestConfigType, RequestConfigType,
RequestDataSourceConfig RequestDataSourceConfig
} from '@/store/modules/chartEditStore/chartEditStore.d' } from '@/store/modules/chartEditStore/chartEditStore.d'
import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { ChartFrameEnum, CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { RequestAJAXTypes, RequestDataTypeEnum } from '@/enums/httpEnum' import { RequestAJAXTypes, RequestDataTypeEnum } from '@/enums/httpEnum'
import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' import { intervalUnitHandle, isPreview, newFunctionHandle } from '@/utils'
import { setOption } from '@/packages/public/chart' import { setOption } from '@/packages/public/chart'
import { isNil } from 'lodash' import { isNil } from 'lodash'
import dayjs from "dayjs"; import dayjs from "dayjs";
import { debounce } from "lodash";
// 获取类型 // 获取类型
type ChartEditStoreType = typeof useChartEditStore type ChartEditStoreType = typeof useChartEditStore
@ -31,7 +30,6 @@ export const useChartDataFetch = (
) => { ) => {
const vChartRef = ref<typeof VChart | null>(null) const vChartRef = ref<typeof VChart | null>(null)
let fetchInterval: any = 0 let fetchInterval: any = 0
console.log("vChartRef:", vChartRef)
// 数据池 // 数据池
const { addGlobalDataInterface } = useChartDataPondFetch() const { addGlobalDataInterface } = useChartDataPondFetch()
@ -47,9 +45,8 @@ export const useChartDataFetch = (
} }
} }
watch(() => targetComponent.request, () => { watch(() => targetComponent.request.requestContentType, () => {
if (isPreview()) return if (isPreview()) return
console.log("监听到 request 更改:", targetComponent.request)
requestIntervalFn() requestIntervalFn()
}, { deep: true }) }, { deep: true })
@ -114,17 +111,7 @@ export const useChartDataFetch = (
} }
} }
const debouncedFetch = createDebouncedFetch(fetchFn, targetComponent.requestSource) createFetchInterval(fetchFn, targetComponent.request)
watch(
() => targetComponent.request.requestParams,
() => {
debouncedFetch()
},
{
immediate: true,
deep: true
}
)
} }
// eslint-disable-next-line no-empty // eslint-disable-next-line no-empty
} catch (error) { } catch (error) {
@ -146,24 +133,14 @@ export const useChartDataFetch = (
console.log(station.value) console.log(station.value)
} }
const debouncedFetch = createDebouncedFetch(fetchFn, targetComponent.requestSource) createFetchInterval(fetchFn, targetComponent.requestSource)
watch(
() => targetComponent.requestSource,
() => {
debouncedFetch()
},
{
immediate: true,
deep: true
}
)
} catch (error) { } catch (error) {
console.log('SourceRequestIntervalFn Error:', error) console.log('SourceRequestIntervalFn Error:', error)
} }
} }
function createDebouncedFetch(fetchFn: () => void, targetComponentRequest: RequestConfigType | RequestDataSourceConfig) { function createFetchInterval(fetchFn: () => void, targetComponentRequest: RequestConfigType | RequestDataSourceConfig) {
const chartEditStore = useChartEditStore() const chartEditStore = useChartEditStore()
const { const {
requestIntervalUnit: targetUnit, requestIntervalUnit: targetUnit,
@ -176,16 +153,15 @@ export const useChartDataFetch = (
requestIntervalUnit: globalUnit, requestIntervalUnit: globalUnit,
requestInterval: globalRequestInterval requestInterval: globalRequestInterval
} = toRefs(chartEditStore.getRequestGlobalConfig) } = toRefs(chartEditStore.getRequestGlobalConfig)
return debounce(() => { fetchFn()
const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value // 定时时间
// // 单位 const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value
const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value // 单位
// // 开启轮询 const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value
if (time) { // 开启轮询
fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) if (time && isPreview()) {
} fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
fetchFn() }
}, 500)
} }
if (isPreview()) { if (isPreview()) {
@ -199,6 +175,5 @@ export const useChartDataFetch = (
} else { } else {
requestIntervalFn() requestIntervalFn()
} }
console.log("vChartRef:", vChartRef)
return { vChartRef } return { vChartRef }
} }
Loading…
Cancel
Save