axios 拦截器一些细节修改

src/axios/helper/axiosCopilot.ts

@@ -25,9 +25,11 @@ export const appendRequestHeaders = (
   instance: AxiosRequestConfig<unknown>,
   options: RequestHeaderOptions[],
 ) => {
-  const requestHeaders = instance.headers as RawAxiosRequestHeaders
+  if (instance) {
+    const requestHeaders = instance.headers as RawAxiosRequestHeaders
 
-  options.forEach((curr) => {
+    options.forEach((curr) => {
-    requestHeaders[curr.key] = curr.value
+      requestHeaders[curr.key] = curr.value
-  })
+    })
+  }
 }

src/axios/helper/interceptor.ts

@@ -20,6 +20,7 @@
  */
 
 import RequestCanceler from '@/axios/helper/canceler'
+import { getAppEnvironment } from '@use-utils/hook'
 
 import type {
   RequestInterceptorConfig,
@@ -53,15 +54,24 @@ export const useAxiosInterceptor = () => {
     axiosFetchInstance['responseInstance'] = instance
   }
 
+  /** 获取请求实例或者响应实例 */
+  const getAxiosFetchInstance = (key: ImplementKey) => {
+    return axiosFetchInstance[key]
+  }
+
   /** 请求前, 执行队列所有方法 */
   const beforeAxiosFetch = (key: ImplementKey) => {
     const funcArr = implement[getImplementKey(key)]
+    const instance = getAxiosFetchInstance(key)
+    const { MODE } = getAppEnvironment()
 
-    funcArr?.forEach((curr) => {
+    if (instance) {
-      if (typeof curr === 'function') {
+      funcArr?.forEach((curr) => {
-        curr()
+        if (typeof curr === 'function') {
-      }
+          curr(instance, MODE)
-    })
+        }
+      })
+    }
   }
 
   /** 设置拦截器队列 */
@@ -76,11 +86,6 @@ export const useAxiosInterceptor = () => {
     return implement[getImplementKey(key)]
   }
 
-  /** 获取请求实例或者响应实例 */
-  const getAxiosFetchInstance = (key: ImplementKey) => {
-    return axiosFetchInstance[key]
-  }
-
   return {
     createRequestAxiosInstance,
     createResponseAxiosInstance,

src/axios/inject/requestInject.ts

@@ -9,22 +9,25 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-/** 请求拦截器入口 */
+/**
+ *
+ * 请求拦截器入口
+ * 被注册方法执行时其实例能够保证获取到, 所以不需要做额外空判断
+ * 在内部执行方法中, 已经做了边界处理
+ */
 
 import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
 import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
 
-import type { RequestInterceptorConfig } from '@/axios/type'
+import type { RequestInterceptorConfig, ImplementFunction } from '@/axios/type'
-
+const { setImplementQueue } = useAxiosInterceptor()
-const { getAxiosFetchInstance, setImplementQueue } = useAxiosInterceptor()
 
 /** 注入请求头信息 */
-const injectRequestHeaders = () => {
+const injectRequestHeaders: ImplementFunction<RequestInterceptorConfig> = (
-  const request = getAxiosFetchInstance(
+  ins,
-    'requestInstance',
+  mode,
-  ) as RequestInterceptorConfig
+) => {
-
+  appendRequestHeaders(ins, [
-  appendRequestHeaders(request, [
     {
       key: 'X-TOKEN',
       value: 'token',
@@ -33,16 +36,19 @@ const injectRequestHeaders = () => {
 }
 
 /** 注入重复请求拦截器 */
-const injectCanceler = () => {
+const injectCanceler: ImplementFunction<RequestInterceptorConfig> = (
-  const request = getAxiosFetchInstance(
+  ins,
-    'requestInstance',
+  mode,
-  ) as RequestInterceptorConfig
+) => {
-
+  axiosCanceler.removePendingRequest(ins) // 检查是否存在重复请求, 若存在则取消已发的请求
-  axiosCanceler.removePendingRequest(request) // 检查是否存在重复请求, 若存在则取消已发的请求
+  axiosCanceler.addPendingRequest(ins) // 把当前的请求信息添加到 pendingRequest 表中
-  axiosCanceler.addPendingRequest(request) // 把当前的请求信息添加到 pendingRequest 表中
 }
 
-/** 注册请求拦截器 */
+/**
+ *
+ * 注册请求拦截器
+ * 请注意执行顺序, setImplementQueue 方法按照注册顺序执行
+ */
 export const setupRequestInterceptor = () => {
   setImplementQueue([injectRequestHeaders, injectCanceler], 'requestInstance')
 }

src/axios/inject/responseInject.ts

@@ -9,24 +9,32 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-/** 响应拦截器入口 */
+/**
+ *
+ * 响应拦截器入口
+ * 被注册方法执行时其实例能够保证获取到, 所以不需要做额外空判断
+ * 在内部执行方法中, 已经做了边界处理
+ */
 
 import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
 
-import type { ResponseInterceptorConfig } from '@/axios/type'
+import type { ResponseInterceptorConfig, ImplementFunction } from '@/axios/type'
 
-const { getAxiosFetchInstance, setImplementQueue } = useAxiosInterceptor()
+const { setImplementQueue } = useAxiosInterceptor()
 
 /** 响应成功后移除缓存请求 url */
-const injectResponseCanceler = () => {
+const injectResponseCanceler: ImplementFunction<ResponseInterceptorConfig> = (
-  const response = getAxiosFetchInstance(
+  ins,
-    'responseInstance',
+  mode,
-  ) as ResponseInterceptorConfig
+) => {
-
+  axiosCanceler.removePendingRequest(ins.config)
-  axiosCanceler.removePendingRequest(response.config)
 }
 
-/** 注册响应拦截器 */
+/**
+ *
+ * 注册响应拦截器
+ * 请注意执行顺序, setImplementQueue 方法按照注册顺序执行
+ */
 export const setupResponseInterceptor = () => {
   setImplementQueue([injectResponseCanceler], 'responseInstance')
 }

src/axios/type.ts

@@ -89,3 +89,7 @@ export interface ImplementQueue {
   implementRequestInterceptorArray: AnyFunc[]
   implementResponseInterceptorArray: AnyFunc[]
 }
+
+export type ImplementFunction<
+  T = RequestInterceptorConfig | ResponseInterceptorConfig,
+> = <K extends T>(ins: K, mode: string) => void

src/office/index.ts

@@ -9,10 +9,19 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { getDetermineEnv } from '@use-utils/hook'
+/**
+ *
+ * onlyoffice
+ *
+ * 该功能暂未实现, 后续应该会补上
+ * 由于该方法需要后端进行相关配合, 因为目前还在考虑是否接上私有 onlyoffice 服务器, 所以该功能暂未实现
+ * 望多多理解, 理解万岁
+ */
+
+import { getAppEnvironment } from '@use-utils/hook'
 import request from '@/axios/instance'
 
 export const getOfficeDocumentApi = async (uuid: string) => {
-  const { VITE_APP_OFFICE_PROXY_URL } = getDetermineEnv()
+  const { VITE_APP_OFFICE_PROXY_URL } = getAppEnvironment()
   const { get } = request
 }

src/utils/hook.ts

@@ -2,7 +2,7 @@
  *
  * @returns 获取当前项目环境
  */
-export const getDetermineEnv = () => {
+export const getAppEnvironment = () => {
   const env = import.meta.env
 
   return env