Cancel previous requests when the underlying page changes

.idea/codeStyles/Project.xml

@@ -25,6 +25,7 @@
       <option name="SPACES_WITHIN_IMPORTS" value="true" />
     </TypeScriptCodeStyleSettings>
     <VueCodeStyleSettings>
+      <option name="UNIFORM_INDENT" value="false" />
       <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
       <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
     </VueCodeStyleSettings>

src/routes/FeedPage.vue

@@ -24,9 +24,12 @@
 
 <script>
 import { chunk as _chunk } from 'lodash-es'
+import axios from 'axios'
 
 import VideoItem from '@/components/VideoItem.vue'
 
+let lastAbortController = new AbortController()
+
 export default {
 	data () {
 		return {
@@ -74,11 +77,14 @@ export default {
 					this.feedName = 'feed'
 					break
 			}
+			lastAbortController.abort()
+			lastAbortController = new AbortController()
 
 			try {
 				this.error = null
 				this.videos = await this.$store.dispatch('auth/makeRequest', {
 					path,
+					signal: lastAbortController.signal,
 					params: {
 						region: region
 					},
@@ -93,6 +99,8 @@ export default {
 						this.error = rData
 						this.errorIsJSON = true
 					}
+				} else if (e instanceof axios.Cancel) {
+					return null
 				} else {
 					throw e
 				}

src/store/authentication-store.js

@@ -90,6 +90,7 @@ const AuthenticationStore = {
 			method,
 			data,
 			params,
+			signal,
 			tokenInParams = false
 		}) {
 			const APIURL = rootGetters['prefs/apiUrl']
@@ -111,6 +112,7 @@ const AuthenticationStore = {
 				url: path,
 				params,
 				data,
+				signal,
 				headers: AuthState.isAuthenticated
 					? {
 							Authorization: AuthState.authToken