Make a custom Vue plugin for axios

client/package-lock.json

@@ -5209,7 +5209,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5624,7 +5625,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5680,6 +5682,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5723,12 +5726,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -11150,11 +11155,6 @@
       "integrity": "sha512-RRuo08A6mFye2RyLVdnODH5kyLiHANMl9EzKXZXCeMrsP4SY3nyjkQnTGlgbbVOBQuaGBMrFp9HPOJYDaVNk/w==",
       "dev": true
     },
-    "vue-axios": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.4.tgz",
-      "integrity": "sha512-DS8Q+WFT3i7nS0aZ/NMmTPf2yhbtlXhj4QEZmY69au/BshsGzGjC6dXaniZaPQlErP3J3Sv1HtQ4RVrXaUTkxA=="
-    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",

client/package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "axios": "^0.18.1",
     "vue": "^2.6.6",
-    "vue-axios": "^2.1.4",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.1"
   },

client/src/main.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
-import axios from 'axios'
+import VueAxios from './plugins/axios'
-import VueAxios from 'vue-axios'
 import DotLoader from 'vue-spinner/src/DotLoader.vue'
 
 import '@/assets/css/main.css'
@@ -13,7 +12,7 @@ import router from './router'
 import store from './store'
 
 Vue.config.productionTip = false
-Vue.use(VueAxios, axios)
+Vue.use(VueAxios)
 
 Vue.component('v-icon', Icon)
 Vue.component('dot-loader', DotLoader)

client/src/plugins/axios.js

@@ -0,0 +1,13 @@
+import axiosHttp from 'axios'
+
+export const axios = axiosHttp
+
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
+axios.defaults.headers.common['Content-Type'] = 'application/json'
+axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:5000/' : 'https://api.valentinkaelin.ch/'
+
+export default {
+  install (Vue) {
+    Vue.prototype.$axios = axiosHttp
+  }
+}

client/src/views/Summoner.vue

@@ -128,39 +128,24 @@ export default {
   },
 
   methods: {
-    apiCall() {
+    async apiCall() {
-      console.log(this.$patch)
       const summoner = this.summoner
       const region = this.regionsList[this.region]
       this.loading = true
-      this.axios({
+      try {
-        method: 'POST',
+        const resp = await this.$axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
-        url: process.env.NODE_ENV === 'development' ? 'http://localhost:5000/api' : 'https://api.valentinkaelin.ch/api',
+        if (resp.data) {
-        headers: {
+          this.summonerFound = true
-          'Content-Type': 'application/json'
+          this.createObject(resp.data)
-        },
+        } else {
-        data: {
+          this.summonerFound = false
-          summoner,
-          region
-        }
-      })
-        .then(response => {
-          return response.data
-        })
-        .then(jsonData => {
-          if (jsonData) {
-            this.summonerFound = true
-            this.createObject(jsonData)
-          } else {
-            this.summonerFound = false
-            this.loading = false
-            console.log('Summoner not found')
-          }
-        })
-        .catch(err => {
           this.loading = false
-          console.log(err)
+          console.log('Summoner not found')
-        })
+        }
+      } catch (error) {
+        this.loading = false
+        console.log(error)
+      }
     },
     checkLocalStorage() {
       if (localStorage[`${this.summoner}:${this.region}`]) {
@@ -260,26 +245,11 @@ export default {
       this.loading = false
 
     },
-    getChampionData() {
+    async getChampionData() {
       console.log('API CALL FOR CHAMPIONS')
       const endpoint = 'Champion'
-      this.axios({
+      const resp = await this.$axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' }))
-        method: 'POST',
+      this.championsInfos = resp.data.data
-        url: process.env.NODE_ENV === 'development' ? 'http://localhost:5000/ddragon' : 'https://api.valentinkaelin.ch/ddragon',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        data: {
-          endpoint
-        }
-      })
-        .then(response => {
-          return response.data
-        })
-        .then(jsonData => {
-          console.log('here')
-          this.championsInfos = jsonData.data
-        })
     },
     getItemLink(id) {
       return `url('https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`