[Vue] add utility function for pattern that issues a single AJAX request at a time (#19239)

* add utility function for pattern that issues a single AJAX request at a time (aborting the previous if in progress)

* make sure to pass abortController as option

1 files changed, 30 insertions, 1 deletions

diff --git a/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts b/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
index 610ede1863..61a3aa7c09 100644
--- a/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
+++ b/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
@@ -266,7 +266,36 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
     postParams: any = {},
     options: AjaxOptions = {},
   ): Promise<R> {
-    return this.fetch<R>(params, { ...options, postParams });
+    return AjaxHelper.fetch<R>(params, { ...options, postParams });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static oneAtATime<R = any>(
+    method: string,
+    options?: AjaxOptions,
+  ): (params: QueryParameters, postParams?: QueryParameters) => Promise<R> {
+    let abortController: AbortController|null = null;
+
+    return (params: QueryParameters, postParams?: QueryParameters) => {
+      if (abortController) {
+        abortController.abort();
+      }
+
+      abortController = new AbortController();
+      return AjaxHelper.post<R>(
+        {
+          ...params,
+          method,
+        },
+        postParams,
+        {
+          ...options,
+          abortController,
+        },
+      ).finally(() => {
+        abortController = null;
+      });
+    };
   }
 
   constructor() {