fix: cancel old axios calls when switch routes really fast

client/package-lock.json

@@ -2035,39 +2035,18 @@
       "dev": true
     },
     "axios": {
-      "version": "0.18.1",
+      "version": "0.19.0-beta.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0-beta.1.tgz",
-      "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+      "integrity": "sha512-Dizm4IyB5T9OrREhPgbqUSofTOjhNJoc+CLjUtyH8SQUyFfik777lLjhl9cVQ4oo3bykkPAN20rxmY1o5w0jrw==",
       "requires": {
-        "follow-redirects": "1.5.10",
+        "follow-redirects": "^1.4.1",
         "is-buffer": "^2.0.2"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        },
         "is-buffer": {
-          "version": "2.0.3",
+          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -5096,7 +5075,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
       "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
-      "dev": true,
       "requires": {
         "debug": "^3.2.6"
       },
@@ -5105,7 +5083,6 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -7455,8 +7432,7 @@
     "ms": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",

client/package.json

@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.18.1",
+    "axios": "^0.19.0-beta.1",
     "vue": "^2.6.6",
     "vue-content-loader": "^0.2.2",
     "vue-router": "^3.0.6",

client/src/layouts/Default.vue

@@ -140,7 +140,7 @@ export default {
     }
   },
 
-  mounted() {
+  created() {
     this.updateCurrentRegion(this.region)
     this.apiCall()
   },

client/src/plugins/axios.js

@@ -6,6 +6,11 @@ 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.leaguestats.gg/'
 
+const CancelToken = axios.CancelToken
+const axiosSource = CancelToken.source()
+axios.defaults.axiosSource = axiosSource
+axios.defaults.cancelToken = axiosSource.token
+
 export default {
   install (Vue) {
     Vue.prototype.$axios = axiosHttp

client/src/router.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { axios } from './plugins/axios'
 
 import Home from '@/views/Home.vue'
 import Summoner from '@/views/Summoner.vue'
@@ -7,7 +8,7 @@ import SummonerChampions from '@/views/SummonerChampions.vue'
 
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes: [
@@ -30,4 +31,21 @@ export default new Router({
       component: SummonerChampions
     },
   ]
-})
+})
+
+router.beforeEach((to, from, next) => {
+  if (to.params.name !== from.params.name && from.name !== null) {
+    // Cancel old requests
+    const axiosCancel = axios.defaults.axiosSource.cancel
+    axiosCancel('Summoner changed')
+
+    // Update cancel token
+    const CancelToken = axios.CancelToken
+    const axiosSource = CancelToken.source()
+    axios.defaults.axiosSource = axiosSource
+    axios.defaults.cancelToken = axiosSource.token
+  }
+  next()
+})
+
+export default router

client/src/store/modules/summoner.js

@@ -69,7 +69,7 @@ export const actions = {
     try {
       const resp = await axios(({ url: 'summoner-basic', data: { summoner, region }, method: 'POST' }))
       if (resp.data) {
-        console.log('---SUMMONER INFOS---')
+        console.log(`---SUMMONER INFOS ${resp.data.account.name}---`)
         console.log(resp.data)
         const infos = createBasicSummonerData(resp.data)
         commit('SUMMONER_FOUND', infos)
@@ -83,7 +83,9 @@ export const actions = {
         console.log('Summoner not found - store')
       }
     } catch (error) {
-      commit('SUMMONER_NOT_FOUND')
+      if(error.message !== 'Summoner changed') {
+        commit('SUMMONER_NOT_FOUND')
+      }
       console.log(error)
     }
   },