refactor reading predefined queries

src/storedQueries.js

@@ -113,5 +113,12 @@ export default {
       document.body.append(uploader)
     }
     uploader.click()
+  },
+
+  readPredefinedQueries () {
+    return fetch('./queries.json')
+      .then(resp => {
+        return resp.json()
+      })
   }
 }

src/views/MainView.vue

@@ -13,35 +13,7 @@ import '@/assets/styles/scrollbars.css'
 
 export default {
   name: 'MainView',
-  components: { MainMenu },
-  created () {
-    this.readPredefinedQueries()
-      .then(queries => {
-        this.$store.commit('updatePredefinedQueries', queries)
-      })
-      .catch(console.error)
-  },
-  methods: {
-    readPredefinedQueries () {
-      return new Promise((resolve, reject) => {
-        const xhr = new XMLHttpRequest()
-        xhr.open('GET', './queries.json')
-        xhr.onload = () => {
-          if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-              resolve(JSON.parse(xhr.responseText || '[]'))
-            } else {
-              reject(xhr.statusText)
-            }
-          }
-        }
-        xhr.onerror = () => {
-          reject(xhr.statusText)
-        }
-        xhr.send()
-      })
-    }
-  }
+  components: { MainMenu }
 }
 </script>
 <style scoped>

src/views/MyQueries.vue

@@ -214,7 +214,14 @@ export default {
     }
   },
   created () {
-    this.queries = storedQueries.getStoredQueries()
+    storedQueries.readPredefinedQueries()
+      .then(queries => {
+        this.$store.commit('updatePredefinedQueries', queries)
+      })
+      .catch(console.error)
+      .finally(() => {
+        this.queries = storedQueries.getStoredQueries()
+      })
   },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.calcMaxTableHeight)