@fy-/fws-vue 2.2.94 → 2.2.95
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/fws/DataTable.vue +43 -19
- package/package.json +1 -1
|
@@ -76,20 +76,29 @@ const hasData = computed(() => data.value && data.value.length > 0)
|
|
|
76
76
|
const hasExportableColumns = computed(() => props.exportableColumns.length > 0)
|
|
77
77
|
const hasPaging = computed(() => paging.value && paging.value.page_max > 1 && paging.value.page_no)
|
|
78
78
|
|
|
79
|
-
// Request
|
|
80
|
-
|
|
79
|
+
// Request cancellation management
|
|
80
|
+
const currentRequest = ref<AbortController | null>(null)
|
|
81
|
+
// Keep track of the latest request to prevent race conditions
|
|
82
|
+
const requestCounter = ref<number>(0)
|
|
81
83
|
|
|
82
84
|
async function getData(page: number = 1) {
|
|
85
|
+
// Increment request counter to track the latest request
|
|
86
|
+
const thisRequestNumber = requestCounter.value + 1
|
|
87
|
+
requestCounter.value = thisRequestNumber
|
|
88
|
+
|
|
83
89
|
// Cancel any ongoing request
|
|
84
|
-
if (currentRequest) {
|
|
85
|
-
currentRequest.abort()
|
|
90
|
+
if (currentRequest.value) {
|
|
91
|
+
currentRequest.value.abort()
|
|
92
|
+
currentRequest.value = null
|
|
86
93
|
}
|
|
87
94
|
|
|
88
95
|
// Create new abort controller for this request
|
|
89
|
-
currentRequest = new AbortController()
|
|
96
|
+
currentRequest.value = new AbortController()
|
|
97
|
+
const signal = currentRequest.value.signal
|
|
90
98
|
|
|
91
99
|
isLoading.value = true
|
|
92
100
|
eventBus.emit('main-loading', true)
|
|
101
|
+
|
|
93
102
|
if (route.query.page) page = Number.parseInt(route.query.page.toString())
|
|
94
103
|
const sort: any = {}
|
|
95
104
|
sort[currentSort.value.field] = currentSort.value.direction
|
|
@@ -99,32 +108,47 @@ async function getData(page: number = 1) {
|
|
|
99
108
|
results_per_page: perPage.value,
|
|
100
109
|
page_no: page,
|
|
101
110
|
}
|
|
111
|
+
|
|
102
112
|
try {
|
|
113
|
+
// Store controller in local variable for closure safety
|
|
114
|
+
const localAbortController = currentRequest.value
|
|
115
|
+
|
|
103
116
|
const r = await restFunction(props.apiPath, 'GET', requestParams, {
|
|
104
117
|
getBody: true,
|
|
105
|
-
signal
|
|
118
|
+
signal,
|
|
106
119
|
})
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
if (
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
120
|
+
|
|
121
|
+
// Only process this response if it's from the most recent request
|
|
122
|
+
// This prevents race conditions where a slow request returns after a newer one
|
|
123
|
+
if (thisRequestNumber === requestCounter.value && localAbortController === currentRequest.value) {
|
|
124
|
+
currentPage.value = page
|
|
125
|
+
data.value = []
|
|
126
|
+
paging.value = undefined
|
|
127
|
+
|
|
128
|
+
if (r && r.result === 'success') {
|
|
129
|
+
data.value = r.data
|
|
130
|
+
paging.value = r.paging
|
|
131
|
+
eventBus.emit(`${props.id}NewData`, data.value)
|
|
132
|
+
}
|
|
114
133
|
}
|
|
115
134
|
}
|
|
116
135
|
catch (error) {
|
|
117
|
-
// Only log error if it's not an abort error
|
|
118
|
-
if (!(error instanceof DOMException && error.name === 'AbortError')
|
|
136
|
+
// Only log error if it's not an abort error and it's from the current request
|
|
137
|
+
if (!(error instanceof DOMException && error.name === 'AbortError')
|
|
138
|
+
&& thisRequestNumber === requestCounter.value) {
|
|
119
139
|
console.error('Error fetching data:', error)
|
|
120
140
|
}
|
|
121
141
|
}
|
|
122
142
|
finally {
|
|
123
|
-
if
|
|
124
|
-
|
|
143
|
+
// Only reset loading state if this is the most recent request
|
|
144
|
+
if (thisRequestNumber === requestCounter.value) {
|
|
145
|
+
// Clear the controller reference only if it's still the same one
|
|
146
|
+
if (currentRequest.value && currentRequest.value.signal === signal) {
|
|
147
|
+
currentRequest.value = null
|
|
148
|
+
}
|
|
149
|
+
isLoading.value = false
|
|
150
|
+
eventBus.emit('main-loading', false)
|
|
125
151
|
}
|
|
126
|
-
isLoading.value = false
|
|
127
|
-
eventBus.emit('main-loading', false)
|
|
128
152
|
}
|
|
129
153
|
}
|
|
130
154
|
|