Merge branch 'release/v1.4.0'

Author: johnnymillergh

.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: [
       {