From 29134066b0d1bc6b9f0db2ca71fe99e77c5b303f Mon Sep 17 00:00:00 2001 From: Valentin Kaelin Date: Sat, 31 Aug 2019 19:19:48 +0200 Subject: [PATCH] Make a custom Vue plugin for axios --- client/package-lock.json | 18 +++++----- client/package.json | 1 - client/src/main.js | 5 ++- client/src/plugins/axios.js | 13 +++++++ client/src/views/Summoner.vue | 64 ++++++++++------------------------- 5 files changed, 41 insertions(+), 60 deletions(-) create mode 100644 client/src/plugins/axios.js diff --git a/client/package-lock.json b/client/package-lock.json index 2178b1d..88fb717 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index af699bd..03b19c2 100644 --- a/client/package.json +++ b/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" }, diff --git a/client/src/main.js b/client/src/main.js index bb24e5e..c7aaad3 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -1,6 +1,5 @@ import Vue from 'vue' -import axios from 'axios' -import VueAxios from 'vue-axios' +import VueAxios from './plugins/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) diff --git a/client/src/plugins/axios.js b/client/src/plugins/axios.js new file mode 100644 index 0000000..0944649 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue index b9aa057..16f23b9 100644 --- a/client/src/views/Summoner.vue +++ b/client/src/views/Summoner.vue @@ -128,39 +128,24 @@ export default { }, methods: { - apiCall() { - console.log(this.$patch) + async apiCall() { const summoner = this.summoner const region = this.regionsList[this.region] this.loading = true - this.axios({ - method: 'POST', - url: process.env.NODE_ENV === 'development' ? 'http://localhost:5000/api' : 'https://api.valentinkaelin.ch/api', - headers: { - 'Content-Type': 'application/json' - }, - data: { - 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 => { + try { + const resp = await this.$axios(({ url: 'api', data: { summoner, region }, method: 'POST' })) + if (resp.data) { + this.summonerFound = true + this.createObject(resp.data) + } else { + this.summonerFound = false 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({ - method: 'POST', - 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 - }) + const resp = await this.$axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' })) + this.championsInfos = resp.data.data }, getItemLink(id) { return `url('https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`