⚡ Update widget mixin to use fetch instead of axios

Lissy93 · Apr 15, 2024 · f353780 · f353780
1 parent 88498d3
commit f353780
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 20 deletions.
diff --git a/src/components/Widgets/XkcdComic.vue b/src/components/Widgets/XkcdComic.vue
@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
 
@@ -41,11 +40,17 @@ export default {
   methods: {
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
-      axios.get(this.endpoint)
-        .then((response) => {
-          this.processData(response.data);
+      fetch(this.endpoint)
+        .then(response => {
+          if (!response.ok) {
+            this.error('Network response was not ok');
+          }
+          return response.json();
         })
-        .catch((dataFetchError) => {
+        .then(data => {
+          this.processData(data);
+        })
+        .catch(dataFetchError => {
           this.error('Unable to fetch data', dataFetchError);
         })
         .finally(() => {
@@ -71,7 +76,7 @@ export default {
 
 <style scoped lang="scss">
 .xkcd-wrapper {
- .xkcd-title {
+.xkcd-title {
     font-size: 1.2rem;
     margin: 0.25rem auto;
     color: var(--widget-text-color);

diff --git a/src/mixins/WidgetMixin.js b/src/mixins/WidgetMixin.js
@@ -2,7 +2,6 @@
  * Mixin that all pre-built and custom widgets extend from.
  * Manages loading state, error handling, data updates and user options
  */
-import axios from 'axios';
 import { Progress } from 'rsup-progress';
 import ErrorHandler from '@/utils/ErrorHandler';
 import { serviceEndpoints } from '@/utils/defaults';
@@ -106,27 +105,51 @@ const WidgetMixin = {
       const method = protocol || 'GET';
       const url = this.useProxy ? this.proxyReqEndpoint : endpoint;
       const data = JSON.stringify(body || {});
-      const CustomHeaders = options || null;
-      const headers = this.useProxy
-        ? { 'Target-URL': endpoint, CustomHeaders: JSON.stringify(CustomHeaders) } : CustomHeaders;
+      const CustomHeaders = options || {};
+      const headers = new Headers(this.useProxy
+        ? ({ ...CustomHeaders, 'Target-URL': endpoint })
+        : CustomHeaders);
+
+      // If the request is a GET, delete the body
+      const bodyContent = method.toUpperCase() === 'GET' ? undefined : data;
+
       const timeout = this.options.timeout || this.defaultTimeout;
+
+      // Setup Fetch request configuration
       const requestConfig = {
-        method, url, headers, data, timeout,
+        method,
+        headers,
+        body: bodyContent,
+        signal: undefined, // This will be set below
       };
-      // Make request
+
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeout);
+      requestConfig.signal = controller.signal;
+
+      // Make request using Fetch API
       return new Promise((resolve, reject) => {
-        axios.request(requestConfig)
-          .then((response) => {
-            if (response.data.success === false) {
-              this.error('Proxy returned error from target server', response.data.message);
+        fetch(url, requestConfig)
+          .then(async response => {
+            const responseData = await response.json();
+            if (responseData.error) {
+              this.error('Proxy returned error from target server', responseData.error?.message);
+            }
+            if (responseData.success === false) {
+              this.error('Proxy didn\'t return success from target server', responseData.message);
             }
-            resolve(response.data);
+            resolve(responseData);
           })
-          .catch((dataFetchError) => {
-            this.error('Unable to fetch data', dataFetchError);
-            reject(dataFetchError);
+          .catch(error => {
+            if (error.name === 'AbortError') {
+              this.error('Request timed out', error);
+            } else {
+              this.error('Unable to fetch data', error);
+            }
+            reject(error);
           })
           .finally(() => {
+            clearTimeout(timeoutId);
             this.finishLoading();
           });
       });