refactor(http): convert to ts

emqx · Sep 23, 2024 · 626eb11 · 626eb11
1 parent afc4267
commit 626eb11
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/lodash": "^4.14.191",
     "@types/marked": "^4.0.1",
+    "@types/nprogress": "^0.2.3",
     "@types/sortablejs": "^1.10.7",
     "@types/utf8": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/common/http.js → src/common/http.ts b/src/common/http.js → src/common/http.ts
@@ -1,43 +1,53 @@
-import axios from 'axios'
-import { ElNotification } from 'element-plus'
+import { API_BASE_URL, REQUEST_TIMEOUT_CODE } from '@/common/constants'
+import { BAD_TOKEN, NAME_PWD_ERROR, TOKEN_TIME_OUT } from '@/common/customErrorCode'
 import CustomMessage from '@/common/CustomMessage'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
+import i18n from '@/i18n'
 import { toLogin } from '@/router'
 import store from '@/store'
 import { stringifyObjSafely } from '@emqx/shared-ui-utils'
-import _ from 'lodash'
-import { API_BASE_URL, REQUEST_TIMEOUT_CODE } from '@/common/constants'
-import { BAD_TOKEN, TOKEN_TIME_OUT, NAME_PWD_ERROR } from '@/common/customErrorCode'
-import i18n from '@/i18n'
+import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import axios from 'axios'
+import { ElNotification } from 'element-plus'
+import { throttle } from 'lodash'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+type CustomRequestConfig = InternalAxiosRequestConfig & {
+  doNotTriggerProgress?: boolean
+  errorsHandleCustom?: number[]
+  handleTimeoutSelf?: boolean
+  controller?: AbortController
+}
+
+type CustomResponse = AxiosResponse & {
+  config: CustomRequestConfig
+}
 
 NProgress.configure({ showSpinner: false, trickleSpeed: 200 })
-let respSet = new Set()
-const resetRespSet = () => (respSet = new Set())
+let respSet = new Set<number>()
+const resetRespSet = () => (respSet = new Set<number>())
 
 Object.assign(axios.defaults, {
   baseURL: API_BASE_URL,
   timeout: 20000,
 })
 
 axios.interceptors.request.use(
-  (config) => {
+  (config: CustomRequestConfig) => {
     const { user } = store.state
-    config.headers = {
-      Authorization: 'Bearer ' + user.token,
-    }
+    config.headers.Authorization = 'Bearer ' + user.token
     const controller = new AbortController()
     config.signal = controller.signal
     config.controller = controller
     store.commit('ADD_ABORT_CONTROLLER', controller)
     return config
   },
   (error) => {
-    Promise.reject(error)
+    return Promise.reject(error)
   },
 )
 
-axios.interceptors.request.use(async (config) => {
+axios.interceptors.request.use(async (config: CustomRequestConfig) => {
   if (!config.doNotTriggerProgress) {
     if (!store.state.request_queue) {
       NProgress.start()
@@ -47,10 +57,10 @@ axios.interceptors.request.use(async (config) => {
   return config
 })
 
-const isTokenExpired = (status, data) =>
+const isTokenExpired = (status: number, data: any) =>
   status === 401 && [BAD_TOKEN, TOKEN_TIME_OUT].includes(data.code)
 
-const readBlobResponse = async (data) => {
+const readBlobResponse = async (data: Blob) => {
   try {
     const ret = await data.text()
     return JSON.parse(ret)
@@ -59,7 +69,7 @@ const readBlobResponse = async (data) => {
   }
 }
 
-const getErrorMessage = (data, status) => {
+const getErrorMessage = (data: AxiosResponse['data'], status: number) => {
   if (!data) {
     return `${status} Network error`
   }
@@ -85,8 +95,8 @@ const getErrorMessage = (data, status) => {
  * handleTimeoutSelf: when error.code === 'ECONNABORTED', handle the error if self
  */
 axios.interceptors.response.use(
-  (response) => {
-    if (!response.config?.doNotTriggerProgress) {
+  (response: CustomResponse) => {
+    if (!response.config.doNotTriggerProgress) {
       setProgressBarDone()
     }
     if (response.data instanceof Blob) {
@@ -98,11 +108,12 @@ axios.interceptors.response.use(
     store.commit('REMOVE_ABORT_CONTROLLER', controller)
     return response.data || response.status
   },
-  async (error) => {
+  async (error: any) => {
     if (!error.config?.doNotTriggerProgress) {
       setProgressBarDone()
     }
 
+    const t: (key: string) => string = (i18n.global as any).t
     //throttle concurrent responses with unique status code
     if (error.response) {
       if (error.response.data instanceof Blob) {
@@ -119,7 +130,7 @@ axios.interceptors.response.use(
           if (doNotPopupAfterPwdChanged) {
             store.commit('SET_AFTER_CURRENT_USER_PWD_CHANGED', false)
           } else {
-            ElNotification.error(i18n.global.t('Base.tokenExpiredMsg'))
+            ElNotification.error(t('Base.tokenExpiredMsg'))
           }
           toLogin()
           // reset set, otherwise will not popup error msg
@@ -133,7 +144,7 @@ axios.interceptors.response.use(
           error.config.errorsHandleCustom.includes(status)
         if (!handleErrorSelf) {
           if (data.code === NAME_PWD_ERROR) {
-            ElNotification.error(i18n.global.t('Base.namePwdError'))
+            ElNotification.error(t('Base.namePwdError'))
           } else {
             CustomMessage.error(getErrorMessage(data, status))
           }
@@ -150,14 +161,16 @@ axios.interceptors.response.use(
       }
       if (!respSet.has(0)) {
         if (!doNotPopupError) {
-          CustomMessage.error(i18n.global.t('Base.networkError'))
+          CustomMessage.error(t('Base.networkError'))
         }
         respSet.add(0)
       }
     }
 
-    if (store.state.request_queue === 0) respSet = new Set()
-    _.throttle(resetRespSet, 2000, { trailing: false })
+    if (store.state.request_queue === 0) {
+      respSet = new Set<number>()
+    }
+    throttle(resetRespSet, 2000, { trailing: false })()
     // Remove AbortController
     const controller = error.config.controller
     store.commit('REMOVE_ABORT_CONTROLLER', controller)