Use axios for requests from frontend

frontend/src/views/Genes.vue

@@ -64,25 +64,23 @@ export default {
     };
   },
   mounted() {
-    this.fetchGenes();
+    this.getGenes();
   },
   methods: {
-    fetchGenes() {
-      axios.get('/api/catalog/v1/genes/', {
+    getGenes() {
+      axios.get('/api/catalog/v1/functions/', {
         headers: {
           Accept: 'application/json',
         },
       })
-        .then((response) => {
-          console.log(response);
-          if (response.ok) {
-            response.json().then((json) => {
-              this.genes = json.results;
-              this.count = json.count;
-            });
-          }
-        });
-    },
+      .then((response) => {
+        this.genes = response.data.results;
+        this.count = response.data.count;
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    }
   },
 };
 </script>

frontend/src/views/Stats.vue

@@ -15,7 +15,7 @@
               <histogram v-bind:geneLengthData="geneLengthData"></histogram>
               <!-- <label for="geneLengthWindowSize">Gene size window</label>
               <input type="range" class="custom-range" min="200" max="10000" step="200"
-              v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)"
+              v-model="geneLengthWindowSize" v-on:input="getGeneLength(geneLengthWindowSize)"
               debounce="500">
               {{geneLengthWindowSize}} -->
             </div>
@@ -27,6 +27,7 @@
 </template>
 
 <script>
+import axios from 'axios';
 import Histogram from '@/components/Histogram.vue';
 
 export default {
@@ -38,23 +39,24 @@ export default {
     };
   },
   mounted() {
-    this.fetchGeneLength(this.geneLengthWindowSize);
+    this.getGeneLength(this.geneLengthWindowSize);
   },
   methods: {
-    fetchGeneLength(geneLengthWindowSize) {
-      fetch('/api/catalog/v1/genes/gene_length?window_size='.concat(geneLengthWindowSize), {
-        method: 'GET',
+    getGeneLength(geneLengthWindowSize) {
+      axios.get('/api/catalog/v1/genes/gene_length', {
+        params: {
+          'window_size': geneLengthWindowSize,
+        },
         headers: {
           Accept: 'application/json',
         },
       })
-        .then((response) => {
-          if (response.ok) {
-            response.json().then((json) => {
-              this.geneLengthData = json.results;
-            });
-          }
-        });
+      .then((response) => {
+        this.geneLengthData = response.data.results;
+      })
+      .catch((error) => {
+        console.log(error);
+      })
     },
   },
   components: { histogram: Histogram },