Promise based Advent22.api_get

ui/src/App.vue

@@ -40,16 +40,13 @@ export default class extends Vue {
   };
 
   public mounted() {
-    this.$advent22.api_get_string("days/date", (date: string) => {
-      this.date = date;
-    });
+    this.$advent22
+      .api_get_string("days/date")
+      .then((date: string) => (this.date = date));
 
-    this.$advent22.api_get_number(
-      "days/visible_days",
-      (visible_days: number) => {
-        this.visible_days = visible_days;
-      },
-    );
+    this.$advent22
+      .api_get_number("days/visible_days")
+      .then((visible_days: number) => (this.visible_days = visible_days));
   }
 }
 </script>

ui/src/components/calendar/CalendarDoor.vue

@@ -24,10 +24,10 @@ export default class extends Vue {
   public on_click() {
     this.$emit("doorClick");
 
-    this.$advent22.api_get_blob(
-      `days/image/${this.door.day}`,
-      (data) => this.$emit("doorSuccess", data),
-      (_, reason) => {
+    this.$advent22
+      .api_get_blob(`days/image/${this.door.day}`)
+      .then((data) => this.$emit("doorSuccess", data))
+      .catch(([reason]) => {
         let msg = "Unbekannter Fehler, bitte wiederholen!";
 
         if (
@@ -39,8 +39,7 @@ export default class extends Vue {
         }
 
         this.$emit("doorFailure", msg);
-      },
-    );
+      });
   }
 }
 </script>

ui/src/plugins/advent22.ts

@@ -38,76 +38,52 @@ export class Advent22 {
     this.api_auth = { username: username, password: password };
   }
 
-  private fail(name: string, reason: unknown): void {
-    console.warn("Failed to query", name, "-", reason);
-  }
-
+  private api_get<T>(endpoint: string): Promise<T>;
+  private api_get<T>(endpoint: string, responseType: ResponseType): Promise<T>;
   private api_get<T>(
     endpoint: string,
-    on_success: (data: T) => void,
-    on_failure: (name: string, reason: unknown) => void,
     responseType: ResponseType = "json",
-  ) {
+  ): Promise<T> {
     const req_data = {
       auth: this.api_auth,
       responseType: responseType,
     };
 
-    this.axios
-      .get<T>(this.api_url(endpoint), req_data)
-      .then((response) => on_success(response.data))
-      .catch((reason) => on_failure(endpoint, reason));
+    return new Promise<T>((resolve, reject) => {
+      this.axios
+        .get<T>(this.api_url(endpoint), req_data)
+        .then((response) => resolve(response.data))
+        .catch((reason) => {
+          console.error(`Failed to query ${endpoint}: ${reason}`);
+          reject([reason, endpoint]);
+        });
+    });
   }
 
-  public api_get_blob(
-    endpoint: string,
-    on_success: (data: string) => void,
-    on_failure: (name: string, reason: unknown) => void = this.fail,
-  ) {
-    this.api_get<Blob>(
-      endpoint,
-      (data: Blob) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(data);
-        reader.onloadend = () => {
-          if (typeof reader.result === "string") {
-            on_success(reader.result);
-          } else {
-            on_failure(endpoint, "failed data url");
-          }
-        };
-      },
-      on_failure,
-      "blob",
-    );
+  public api_get_blob(endpoint: string): Promise<string> {
+    return new Promise<string>((resolve, reject) => {
+      this.api_get<Blob>(endpoint, "blob")
+        .then((data: Blob) => {
+          const reader = new FileReader();
+          reader.readAsDataURL(data);
+          reader.onloadend = () => {
+            if (typeof reader.result === "string") {
+              resolve(reader.result);
+            } else {
+              reject([endpoint, "failed data url"]);
+            }
+          };
+        })
+        .catch(reject);
+    });
   }
 
-  public api_get_string(
-    endpoint: string,
-    on_success: (data: string) => void,
-    on_failure: (name: string, reason: unknown) => void = this.fail,
-  ) {
-    this.api_get<string>(
-      endpoint,
-      (data: string) => {
-        on_success(data);
-      },
-      on_failure,
-    );
+  public api_get_string(endpoint: string): Promise<string> {
+    return this.api_get<string>(endpoint);
   }
 
-  public api_get_number(
-    endpoint: string,
-    on_success: (data: number) => void,
-    on_failure: (name: string, reason: unknown) => void = this.fail,
-  ) {
-    this.api_get<number>(
-      endpoint,
-      (data: number) => {
-        on_success(data);
-      },
-      on_failure,
-    );
+  public api_get_number(endpoint: string): Promise<number> {
+    return this.api_get<number>(endpoint);
   }
 }