x-img-cache: refactor axios calls

src/components/frame/XImgCache.ts

@@ -27,6 +27,8 @@ const expirationManager = new CacheExpiration(cacheName, {
 
 // Start fetching with multipreview
 let fetchPreviewTimer: any;
+
+/** Flushes the queue of preview image requests */
 async function flushPreviewQueue() {
   if (fetchPreviewQueue.length === 0) return;
 
@@ -57,13 +59,10 @@ async function flushPreviewQueue() {
 
   try {
     // Fetch multipreview
-    const multiUrl = API.IMAGE_MULTIPREVIEW();
+    const res = await fetchMultipreview(files);
-    const res = await axios.post(multiUrl, files, {
-      responseType: "blob",
-    });
-
-    // Get blob
     if (res.status !== 200) throw new Error("Error fetching multi-preview");
+
+    // Read blob
     const blob = res.data;
 
     let idx = 0;
@@ -163,13 +162,7 @@ export async function fetchImage(url: string): Promise<Blob> {
   return await res.blob();
 }
 
-export async function fetchOneImage(url: string) {
+/** Creates a dummy response from a blob and headers */
-  const res = await axios.get(url, {
-    responseType: "blob",
-  });
-  return getResponse(res.data, null, res.headers);
-}
-
 function getResponse(blob: Blob, type: string | null, headers: any = {}) {
   return new Response(blob, {
     status: 200,
@@ -181,3 +174,20 @@ function getResponse(blob: Blob, type: string | null, headers: any = {}) {
     },
   });
 }
+
+/** Fetch single image with axios */
+export async function fetchOneImage(url: string) {
+  const res = await axios.get(url, {
+    responseType: "blob",
+  });
+  return getResponse(res.data, null, res.headers);
+}
+
+/** Fetch multipreview with axios */
+export async function fetchMultipreview(files: any[]) {
+  const multiUrl = API.IMAGE_MULTIPREVIEW();
+
+  return await axios.post(multiUrl, files, {
+    responseType: "blob",
+  });
+}