Merge branch 'release/v1.4.0'

.env

@@ -2,4 +2,4 @@
 VUE_APP_PACKAGE_JSON=''
 
 # TAG must be corresponding with the version tag in package.json, need to modify it when new version releases
-TAG=1.3.1
+TAG=1.4.0

.env.development

@@ -8,11 +8,11 @@ VUE_APP_RUN_ON_DOCKER = 'false'
 
 # Backend server IP and port. It's required when the environment is development.
 # Left blank if the environment is not development.
-VUE_APP_BASE_URL = 'http://localhost:8080'
+VUE_APP_BASE_URL = 'http://localhost:8081'
 # Base api
 VUE_APP_BASE_API = '/jm-spring-boot-template-dev_loc'
 # Resource base api for picture, video ect.
-VUE_APP_RESOURCE_BASE_API = 'http://localhost:8080/jm-spring-boot-template-dev_loc'
+VUE_APP_RESOURCE_BASE_API = 'http://localhost:8081/jm-spring-boot-template-dev_loc'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

CHANGELOG.md

@@ -1,3 +1,12 @@
+# [1.4.0](https://github.com/johnnymillergh/vuetify-typescript-playground/compare/v1.3.1...v1.4.0) (2020-01-07)
+
+
+### Performance Improvements
+
+* **$Axios:** avoid sending same request at the same time ([c7eb3b7](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/c7eb3b7d5388aaa0b8fea4fcb6cd129c87fb6b5c))
+
+
+
 ## [1.3.1](https://github.com/johnnymillergh/vuetify-typescript-playground/compare/v1.3.0...v1.3.1) (2020-01-03)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-typescript-playground",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "description": "Vuetify Typescript Playground",
   "author": {

src/plugins/axios-mock-adapter/index.ts

@@ -1,15 +1,13 @@
 const axios = require('axios')
 const MockAdapter = require('axios-mock-adapter')
 
-// All requests using this instance will have a 2 seconds delay:
+// All requests using this instance will have a 2 seconds delay.
 const mock = new MockAdapter(axios, { delayResponse: 2000 })
 
-// Mock GET request to /users when param `searchText` is 'John'
-// arguments for reply are (status, data, headers)
 mock.onGet('/api/getDemo').reply(200, {
   message: '/api/getDemo success!'
 })
 
-mock.onGet('/api/delay').reply(200, {
-  message: 'delay message'
+mock.onGet('/api/cancel-request-test').reply(200, {
+  message: '/api/cancel-request-test SUCCESS'
 })

src/plugins/axios/cancellation.ts

@@ -0,0 +1,43 @@
+// eslint-disable-next-line no-unused-vars
+import Axios, { AxiosRequestConfig, Canceler } from 'axios'
+
+export const CancelToken = Axios.CancelToken
+export const pendingRequestList: PendingRequest[] = []
+
+/**
+ * Pending Request
+ * @author Johnny Miller (鍾俊), e-mail: johnnysviva@outlook.com
+ * @date 1/6/20 2:26 PM
+ */
+export class PendingRequest {
+  /**
+   * Request token.
+   *
+   * Format: [URL]::[HTTP Method]::[Stringified Request Params]
+   *
+   * Sample: /api/cancel-request-test::get::undefined
+   */
+  requestToken!: string
+
+  /**
+   * Cancel executor
+   */
+  cancelExecutor!: Canceler
+
+  constructor (requestToken: string, cancelExecutor: Canceler) {
+    this.requestToken = requestToken
+    this.cancelExecutor = cancelExecutor
+  }
+}
+
+export const cancelAndRemoveSamePendingRequest = (axiosRequestConfig: AxiosRequestConfig): void => {
+  pendingRequestList.forEach((pendingRequest, index) => {
+    const requestToken = `${axiosRequestConfig?.url?.split('?')[0]}::${axiosRequestConfig.method}::${JSON.stringify(axiosRequestConfig.params)}`
+    if (pendingRequest.requestToken === requestToken) {
+      // Execute cancellation of this pending request.
+      pendingRequest.cancelExecutor(`Cancelled Axios request. Request token: ${requestToken}`)
+      // Remove this pending request from list.
+      pendingRequestList.splice(index, 1)
+    }
+  })
+}

src/plugins/axios/index.ts

@@ -3,9 +3,10 @@
  * @date 1/2/20 9:15 AM
  */
 // eslint-disable-next-line no-unused-vars
-import Axios, { ResponseType } from 'axios'
+import Axios, { AxiosRequestConfig, Canceler, ResponseType } from 'axios'
 import { validate } from 'class-validator'
 import { ClassValidationUtil } from '@/utils/class-validation-util'
+import * as Cancellation from '@/plugins/axios/cancellation'
 
 // 1. Create an axios instance.
 export const service = Axios.create({
@@ -37,6 +38,14 @@ service.interceptors.request.use(
         throw new Error(`Validation failed! The 1st error: ${ClassValidationUtil.getFirstValidationError(validation)}`)
       }
     }
+    // Cancel and remove same request before sending upcoming request.
+    Cancellation.cancelAndRemoveSamePendingRequest(axiosRequestConfig)
+    // Configure cancelToken for request
+    axiosRequestConfig.cancelToken = new Cancellation.CancelToken((cancel: Canceler) => {
+      const requestToken = `${axiosRequestConfig?.url?.split('?')[0]}::${axiosRequestConfig.method}::${JSON.stringify(axiosRequestConfig.params)}`
+      const pendingRequest = new Cancellation.PendingRequest(requestToken, cancel)
+      Cancellation.pendingRequestList.push(pendingRequest)
+    })
     return axiosRequestConfig
   },
   error => {

src/requests/vuetify-demo/index.ts

@@ -1,8 +1,9 @@
 import * as Axios from '@/plugins/axios'
-// eslint-disable-next-line no-unused-vars
+/* eslint-disable no-unused-vars */
 import { GetDemoPayload } from '@/requests/vuetify-demo/payload/get-demo-payload'
+import { CancelRequestTestPayload } from '@/requests/vuetify-demo/payload/cancel-request-test-payload'
 
 export const vuetifyDemoApi = {
   getDemo: (getDemoPayload: GetDemoPayload) => Axios.get('/api/getDemo', getDemoPayload),
-  delay: (delayTime: number) => Axios.get('/api/delay', delayTime)
+  cancelRequestTest: (cancelRequestTestPayload: CancelRequestTestPayload) => Axios.get('/api/cancel-request-test', cancelRequestTestPayload)
 }

src/requests/vuetify-demo/payload/cancel-request-test-payload.ts

@@ -0,0 +1,9 @@
+import { Allow } from 'class-validator'
+
+export class CancelRequestTestPayload {
+  /**
+   * ID.
+   */
+  @Allow()
+  id!: number
+}

src/router/index.ts

@@ -12,7 +12,7 @@ const routes = [
   },
   {
     path: '/hello-world',
-    name: 'hello-world',
+    // name: 'hello-world',
     // route level code-splitting
     // this generates a separate chunk (hello-world.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
@@ -28,7 +28,7 @@ const routes = [
   },
   {
     path: '/vuetify-demo',
-    name: 'vuetify-demo',
+    // name: 'vuetify-demo',
     component: Home,
     children: [
       {
@@ -39,7 +39,7 @@ const routes = [
   },
   {
     path: '/form-validation',
-    name: 'form-validation',
+    // name: 'form-validation',
     component: Home,
     children: [
       {

src/views/vuetify-demo/index.vue

@@ -44,7 +44,7 @@
     <v-row align="center">
       <v-col class="text-center" cols="12" sm="4">
         <div class="my-2">
-          <v-btn small>Normal</v-btn>
+          <v-btn @click="handleClickSendRequest" small>Send Request</v-btn>
         </div>
         <div class="my-2">
           <v-btn small color="primary">Primary</v-btn>
@@ -119,6 +119,8 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { vuetifyDemoApi } from '@/requests/vuetify-demo'
+import { CancelRequestTestPayload } from '@/requests/vuetify-demo/payload/cancel-request-test-payload'
 
 export default Vue.extend({
   name: 'VuetifyDemo',
@@ -163,6 +165,18 @@ export default Vue.extend({
     },
     handleClickStopLoading () {
       this.loading = !this.loading
+    },
+    async handleClickSendRequest () {
+      try {
+        const cancelRequestTestPayload = new CancelRequestTestPayload()
+        cancelRequestTestPayload.id = 1
+        const response = await vuetifyDemoApi.cancelRequestTest(cancelRequestTestPayload)
+        console.info('handleClickSendRequest', response)
+        this.$toast.success(response.message)
+      } catch (error) {
+        console.error('Error occurred when sending request `cancelRequestTest`!', error)
+        this.$toast.error(error.message)
+      }
     }
   }
 })