perf($ClassValidator): integrate Class Validator

Author: johnnymillergh

src/App.vue

@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { AppUtil } from '@/utils/app-util.ts'
+import { AppUtil } from '@/utils/app-util'
 
 export default Vue.extend({
   name: 'App',

src/main.ts

@@ -8,6 +8,7 @@ import '@mdi/font/css/materialdesignicons.css'
 import '@/directives/throttled-click'
 import '@/directives/debounced-click'
 import { listenToColorScheme } from '@/plugins/adaptive-color-scheme'
+import '@/plugins/mock'
 
 Vue.config.productionTip = false
 

src/plugins/axios/index.ts

@@ -0,0 +1,232 @@
+/**
+ * @author Johnny Miller (鍾俊), e-mail: [email protected]
+ * @date 1/2/20 9:15 AM
+ */
+// eslint-disable-next-line no-unused-vars
+import Axios, { ResponseType } from 'axios'
+import { validate } from 'class-validator'
+import { ClassValidationUtil } from '@/utils/class-validation-util'
+
+// 1. Create an axios instance.
+export const service = Axios.create({
+  // Base URL of API
+  baseURL: process.env.VUE_APP_BASE_URL,
+  // Request timeout: 30s
+  timeout: 30000,
+  /**
+   * `validateStatus` defines whether to resolve or reject the promise for a given HTTP response status code.
+   * The value of status must be less than 999.
+   * @param {number} status HTTP's status code
+   * @return {boolean} If `validateStatus` returns `true` (or is set to `null` or `undefined`),
+   * the promise will be resolved; otherwise, the promise will be rejected.
+   */
+  validateStatus: status => {
+    // Only the HTTP status code is equal to 200, axios would resolve the promise
+    return status === 200
+  }
+})
+
+// 2. Request interceptor's configuration.
+service.interceptors.request.use(
+  async axiosRequestConfig => {
+    if (axiosRequestConfig?.params) {
+      const validation = await validate(axiosRequestConfig.params)
+      if (validation.length > 0) {
+        console.error('Validation failed! Validation:', validation)
+        console.error('Validation failed! Error message:', ClassValidationUtil.getAllValidationError(validation))
+        throw new Error(`Validation failed! The 1st error: ${ClassValidationUtil.getFirstValidationError(validation)}`)
+      }
+    }
+    return axiosRequestConfig
+  },
+  error => {
+    // Do something with request error
+    // for debug
+    console.error('[Axios] Error occurred when sending request!', error)
+    return Promise.reject(error)
+  }
+)
+
+// 3. Response interceptor's configuration.
+service.interceptors.response.use(
+  response => {
+    // Only the HTTP status code is equal to 200, axios would resolve the promise
+    const resp = response.data
+    return Promise.resolve(resp)
+  },
+  error => {
+    console.error('[Axios] Error occurred when handling response!', error)
+    console.error('[Axios] Error occurred when handling response! Response:', error.response)
+    return Promise.reject(error)
+  }
+)
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * Send a GET request.
+ *
+ * The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.
+ *
+ * @param url URL
+ * @param params Params
+ * @param responseType Response type.
+ * @return {Promise<any>} Response data.
+ * @see <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET'>HTTP request methods — GET | MDN</a>
+ */
+export function get (url: string, params?: any, responseType: ResponseType = 'json'): Promise<any> {
+  return new Promise<any>((resolve, reject) => {
+    service.get(url, {
+      params: params,
+      responseType: responseType
+    }).then(resp => {
+      resolve(resp)
+    }).catch(rejectedReason => {
+      reject(rejectedReason)
+    })
+  })
+}
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * The DELETE method deletes the specified resource.
+ *
+ * @param url URL.
+ * @param params Params.
+ * @return {Promise<any>} Response data.
+ * @see <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/DELETE'>HTTP request methods — DELETE | MDN</a>
+ */
+export function deleteRequest (url: string, params: any): Promise<any> {
+  return new Promise<any>((resolve, reject) => {
+    service.delete(url, {
+      params: params
+    }).then(resp => {
+      resolve(resp)
+    }).catch(rejectedReason => {
+      reject(rejectedReason)
+    })
+  })
+}
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * The HEAD method asks for a response identical to that of a GET request, but without the response body.
+ *
+ * The HTTP HEAD method requests the headers that are returned if the specified resource would be requested with an HTTP GET method.
+ * Such a request can be done before deciding to download a large resource to save bandwidth, for example.
+ *
+ * @param url URL.
+ * @param params Params.
+ * @return {Promise<any>} Response data.
+ * @see <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/HEAD'>HTTP request methods — HEAD | MDN</a>
+ */
+export function head (url: string, params: any): Promise<any> {
+  return new Promise<any>((resolve, reject) => {
+    service.head(url, {
+      params: params
+    }).then(resp => {
+      resolve(resp)
+    }).catch(rejectedReason => {
+      reject(rejectedReason)
+    })
+  })
+}
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * Send a POST request with payload.
+ *
+ * The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header.
+ *
+ * @param url URL
+ * @param params Payload.
+ * @return {Promise<any>} Response data.
+ * @see <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST'>HTTP request methods — POST | MDN</a>
+ */
+export function post (url: string, params: any): Promise<any> {
+  return new Promise<any>((resolve, reject) => {
+    service.post(url, params)
+      .then(resp => {
+        resolve(resp)
+      })
+      .catch(rejectedReason => {
+        reject(rejectedReason)
+      })
+  })
+}
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * Send a legacy POST request with URL search params.
+ *
+ * The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header.
+ *
+ * @see <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST'>HTTP request methods — POST | MDN</a>
+ * @param url URL.
+ * @param params URL search params.
+ * @return {Promise<any>} Response data.
+ */
+export function legacyPost (url: string, params: any): Promise<any> {
+  const urlSearchParams = new URLSearchParams()
+  Object.keys(params).forEach(key => {
+    urlSearchParams.append(key, params[key])
+  })
+  return new Promise<any>((resolve, reject) => {
+    service.post(url, urlSearchParams)
+      .then(resp => {
+        resolve(resp)
+      })
+      .catch(rejectedReason => {
+        reject(rejectedReason)
+      })
+  })
+}
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * Send a PUT request.
+ *
+ * The HTTP PUT request method creates a new resource or replaces a representation of the target resource with the request payload.
+ * The difference between PUT and POST is that PUT is idempotent:
+ * calling it once or several times successively has the same effect (that is no side effect), where successive identical POST may have additional effects, like passing an order several times.
+ *
+ * @param url URL.
+ * @param params Params.
+ * @returns {Promise<any>} Response data.
+ * @see <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PUT'>HTTP request methods — PUT | MDN</a>
+ */
+export function put (url: string, params: any): Promise<any> {
+  return new Promise<any>((resolve, reject) => {
+    service.put(url, {
+      params: params
+    }).then(resp => {
+      resolve(resp)
+    }).catch(rejectedReason => {
+      reject(rejectedReason)
+    })
+  })
+}
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * The PATCH method is used to apply partial modifications to a resource.
+ *
+ * The HTTP PUT method only allows complete replacement of a document.
+ * Unlike PUT, PATCH is not idempotent, meaning successive identical patch requests may have different effects.
+ * However, it is possible to issue PATCH requests in such a way as to be idempotent.
+ *
+ * @param url URL.
+ * @param params Params.
+ * @return {Promise<any>} Response data.
+ * @see <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PATCH'>HTTP request methods — PATCH | MDN</a>
+ */
+export function patch (url: string, params: any): Promise<any> {
+  return new Promise((resolve, reject) => {
+    service.patch<any>(url, params)
+      .then(resp => {
+        resolve(resp)
+      })
+      .catch(rejectedReason => {
+        reject(rejectedReason)
+      })
+  })
+}

src/plugins/mock/index.ts

@@ -0,0 +1,20 @@
+// @ts-ignore
+import Mock from 'mockjs'
+
+export const mock = Mock
+mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+mock.XHR.prototype.send = function () {
+  if (this.custom.xhr) {
+    this.custom.xhr.withCredentials = this.withCredentials || false
+  }
+  this.proxy_send(...arguments)
+}
+
+mock.mock(/\/api\/get/, 'get', login)
+
+function login (res: any): any {
+  return {
+    code: 200,
+    message: 'Response done.'
+  }
+}

src/requests/vuetify-demo/index.ts

@@ -0,0 +1,7 @@
+import * as Axios from '@/plugins/axios'
+// eslint-disable-next-line no-unused-vars
+import { GetDemoPayload } from '@/requests/vuetify-demo/payload/get-demo-payload'
+
+export const vuetifyDemoApi = {
+  getDemo: (getDemoPayload: GetDemoPayload) => Axios.get('/api/get', getDemoPayload)
+}

src/requests/vuetify-demo/payload/get-demo-payload.ts

@@ -0,0 +1,57 @@
+import {
+  Contains,
+  IsInt,
+  IsNotEmpty,
+  Length,
+  IsEmail,
+  IsFQDN,
+  IsDate,
+  Min,
+  Max, IsOptional
+} from 'class-validator'
+
+/**
+ * Get demo payload
+ */
+export class GetDemoPayload {
+  /**
+   * Title.
+   */
+  @Length(10, 20)
+  @IsNotEmpty({ message: 'Title is required!' })
+  title!: string
+
+  /**
+   * Text.
+   */
+  @Contains('hello')
+  text!: string
+
+  /**
+   * Rating.
+   */
+  @IsInt()
+  @Min(0)
+  @Max(10)
+  rating!: number
+
+  /**
+   * Email.
+   */
+  @IsEmail()
+  email!: string
+
+  /**
+   * site.
+   */
+  @IsFQDN()
+  @IsOptional()
+  site?: string
+
+  /**
+   * Create date.
+   */
+  @IsDate()
+  @IsOptional()
+  createDate?: Date
+}

src/utils/class-validation-util.ts

@@ -0,0 +1,36 @@
+// eslint-disable-next-line no-unused-vars
+import { ValidationError } from 'class-validator/validation/ValidationError'
+
+export class ClassValidationUtil {
+  /**
+   * Get first validation error
+   * @param {ValidationError[]} validationErrors validation error array
+   * @return {string} error message
+   * @author Johnny Miller (鍾俊), e-mail: [email protected]
+   * @date 1/2/20 11:39 AM
+   */
+  static getFirstValidationError = (validationErrors: ValidationError[]): string => {
+    let firstErrorMessage = ''
+    for (const property in validationErrors[0].constraints) {
+      firstErrorMessage += `Field: ${validationErrors[0].property}, type: ${property}, error message: ${validationErrors[0].constraints[property]}`
+    }
+    return firstErrorMessage
+  }
+
+  /**
+   * Get all validation error
+   * @param {ValidationError[]} validationErrors validation error array
+   * @return {string} error message
+   * @author Johnny Miller (鍾俊), e-mail: [email protected]
+   * @date 1/2/20 12:58 PM
+   */
+  static getAllValidationError = (validationErrors: ValidationError[]): string => {
+    let errorMessage = ''
+    validationErrors.forEach(validationError => {
+      for (const property in validationError.constraints) {
+        errorMessage += `Field: ${validationError.property}, type: ${property}, error message: ${validationError.constraints[property]}; `
+      }
+    })
+    return errorMessage.substr(0, errorMessage.length - 2)
+  }
+}