enterprise axiosing

src/components/WeekNumber.vue

@@ -1,22 +1,31 @@
 <script lang="ts">
-import axios from "axios";
+import { defineComponent } from "vue";
+import HHVDataService from "@/services/HHVDataService";
+import type HHV from "@/types/HHV";
+import type ResponseData from "@/types/ResponseData";
 
-export default {
+export default defineComponent({
   data() {
     return {
-      weeknumber: 0,
+      weeknumber: {} as HHV,
     };
   },
-  
-  async created() {
-    try {
-      const res = await axios.get("https://hanyadikhetvan.tormakristof.eu/");
-      this.weeknumber = res.data;
-    } catch (error) {
-      console.log(error);
+  methods: {
+    retrieveWeekNumber() {
+        HHVDataService.getWeekNumber()
+          .then((response: ResponseData) => {
+            this.weeknumber = response.data;
+            console.log(response.data);
+          })
+          .catch((e: Error) => {
+            console.log(e);
+          });
     }
-  }
-}
+  },
+  mounted() {
+    this.retrieveWeekNumber();
+  },
+});
 </script>
 
 <template>

src/http-common.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+import type { AxiosInstance } from "axios";
+
+const apiClient: AxiosInstance = axios.create({
+  baseURL: "https://hanyadikhetvan.tormakristof.eu",
+
+});
+
+export default apiClient;

src/services/HHVDataService.ts

@@ -0,0 +1,10 @@
+import http from "@/http-common";
+
+/* eslint-disable */
+class HHVDataService {
+  getWeekNumber(): Promise<any> {
+    return http.get("/");
+  }
+}
+
+export default new HHVDataService();

src/types/HHV.ts

@@ -0,0 +1,3 @@
+export default interface HHV {
+    id: number;
+}

src/types/ResponseData.ts

@@ -0,0 +1,3 @@
+export default interface ResponseData {
+    data: any;
+}