!103 优化Axios相关类型推断和语法

Merge pull request !103 from 石头web/master-fetch-dev

src/api/axios.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
+import axios, { AxiosResponse, AxiosRequestConfig, Axios } from 'axios'
 import { ResultEnum, ModuleTypeEnum } from "@/enums/httpEnum"
 import { PageEnum, ErrorPageNameMap } from "@/enums/pageEnum"
 import { StorageEnum } from '@/enums/storageEnum'
@@ -8,10 +8,20 @@ import { redirectErrorPage, getLocalStorage, routerTurnByName, isPreview } from
 import { fetchAllowList } from './axios.config'
 import includes from 'lodash/includes'
 
+export interface MyResponseType<T> {
+  code: ResultEnum
+  data: T
+  message: string
+}
+
+export interface MyRequestInstance extends Axios {
+  <T = any>(config: AxiosRequestConfig): Promise<MyResponseType<T>>
+}
+
 const axiosInstance = axios.create({
   baseURL: `${import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : ''}${axiosPre}`,
   timeout: ResultEnum.TIMEOUT,
-})
+}) as unknown as MyRequestInstance
 
 axiosInstance.interceptors.request.use(
   (config: AxiosRequestConfig) => {

src/api/http.ts

@@ -9,16 +9,16 @@ import {
 } from '@/enums/httpEnum'
 import type { RequestGlobalConfigType, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
-export const get = (url: string, params?: object) => {
+export const get = <T = any>(url: string, params?: object) => {
-  return axiosInstance({
+  return axiosInstance<T>({
     url: url,
     method: RequestHttpEnum.GET,
     params: params,
   })
 }
 
-export const post = (url: string, data?: object, headersType?: string) => {
+export const post = <T = any>(url: string, data?: object, headersType?: string) => {
-  return axiosInstance({
+  return axiosInstance<T>({
     url: url,
     method: RequestHttpEnum.POST,
     data: data,
@@ -28,8 +28,8 @@ export const post = (url: string, data?: object, headersType?: string) => {
   })
 }
 
-export const patch = (url: string, data?: object, headersType?: string) => {
+export const patch = <T = any>(url: string, data?: object, headersType?: string) => {
-  return axiosInstance({
+  return axiosInstance<T>({
     url: url,
     method: RequestHttpEnum.PATCH,
     data: data,
@@ -39,8 +39,8 @@ export const patch = (url: string, data?: object, headersType?: string) => {
   })
 }
 
-export const put = (url: string, data?: object, headersType?: ContentTypeEnum) => {
+export const put = <T = any>(url: string, data?: object, headersType?: ContentTypeEnum) => {
-  return axiosInstance({
+  return axiosInstance<T>({
     url: url,
     method: RequestHttpEnum.PUT,
     data: data,
@@ -50,8 +50,8 @@ export const put = (url: string, data?: object, headersType?: ContentTypeEnum) =
   })
 }
 
-export const del = (url: string, params?: object) => {
+export const del = <T = any>(url: string, params?: object) => {
-  return axiosInstance({
+  return axiosInstance<T>({
     url: url,
     method: RequestHttpEnum.DELETE,
     params
@@ -82,11 +82,11 @@ export const http = (type?: RequestHttpEnum) => {
 }
 const prefix = 'javascript:'
 // 对输入字符进行转义处理
-export const translateStr = (target: string | object) => {
+export const translateStr = (target: string | Record<any, any>) => {
   if (typeof target === 'string') {
     if (target.startsWith(prefix)) {
       const funcStr = target.split(prefix)[1]
-      let result;
+      let result
       try {
         result = new Function(`${funcStr}`)()
       } catch (error) {
@@ -100,8 +100,8 @@ export const translateStr = (target: string | object) => {
   }
   for (const key in target) {
     if (Object.prototype.hasOwnProperty.call(target, key)) {
-      const subTarget = (target as any)[key];
+      const subTarget = target[key]
-      (target as any)[key] = translateStr(subTarget)
+      target[key] = translateStr(subTarget)
     }
   }
   return target

src/api/path/project.api.ts

@@ -1,84 +1,98 @@
 import { http } from '@/api/http'
 import { httpErrorHandle } from '@/utils'
 import { ContentTypeEnum, RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEnum'
+import { ProjectItem, ProejctDetail } from './project'
 
 // * 项目列表
 export const projectListApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.PROJECT}/list`, data);
+    const res = await http(RequestHttpEnum.GET)<ProjectItem[]>(`${ModuleTypeEnum.PROJECT}/list`, data)
-    return res;
+    return res
   } catch {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
 // * 新增项目
 export const createProjectApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/create`, data);
+    const res = await http(RequestHttpEnum.POST)<{
-    return res;
+      /**
+       * 项目id
+       */
+      id: number
+    }>(`${ModuleTypeEnum.PROJECT}/create`, data)
+    return res
   } catch {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
 // * 获取项目
 export const fetchProjectApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.PROJECT}/getData`, data);
+    const res = await http(RequestHttpEnum.GET)<ProejctDetail>(`${ModuleTypeEnum.PROJECT}/getData`, data)
-    return res;
+    return res
   } catch {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
 // * 保存项目
 export const saveProjectApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/save/data`, data, ContentTypeEnum.FORM_URLENCODED);
+    const res = await http(RequestHttpEnum.POST)(
-    return res;
+      `${ModuleTypeEnum.PROJECT}/save/data`,
+      data,
+      ContentTypeEnum.FORM_URLENCODED
+    )
+    return res
   } catch {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
 // * 修改项目基础信息
 export const updateProjectApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/edit`, data);
+    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/edit`, data)
-    return res;
+    return res
   } catch {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
-
 // * 删除项目
 export const deleteProjectApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.DELETE)(`${ModuleTypeEnum.PROJECT}/delete`, data);
+    const res = await http(RequestHttpEnum.DELETE)(`${ModuleTypeEnum.PROJECT}/delete`, data)
-    return res;
+    return res
   } catch {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
 // * 修改发布状态 [-1未发布,1发布]
 export const changeProjectReleaseApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.PUT)(`${ModuleTypeEnum.PROJECT}/publish`, data);
+    const res = await http(RequestHttpEnum.PUT)(`${ModuleTypeEnum.PROJECT}/publish`, data)
-    return res;
+    return res
   } catch {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
 // * 上传文件
 export const uploadFile = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/upload`, data, ContentTypeEnum.FORM_DATA);
+    const res = await http(RequestHttpEnum.POST)<{
-    return res;
+      /**
+       * 文件地址
+       */
+      fileName: string
+    }>(`${ModuleTypeEnum.PROJECT}/upload`, data, ContentTypeEnum.FORM_DATA)
+    return res
   } catch {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }

src/api/path/project.d.ts

@@ -0,0 +1,39 @@
+export type ProjectItem = {
+  /**
+   * 项目 id
+   */
+  id: string
+  /**
+   * 项目名称
+   */
+  projectName: string
+  /**
+   * 项目状态:\
+   * -1: 未发布\
+   * 1: 已发布
+   */
+  state: number
+  /**
+   * 创建时间
+   */
+  createTime: string
+  /**
+   * 预览图片url
+   */
+  indexImage: string
+  /**
+   * 创建者 id
+   */
+  createUserId: string
+  /**
+   * 项目备注
+   */
+  remarks: string
+}
+
+export interface ProejctDetail extends ProjectItem {
+  /**
+   * 项目参数
+   */
+   content: string
+}

src/api/path/system.api.ts

@@ -1,33 +1,39 @@
 import { http } from '@/api/http'
 import { httpErrorHandle } from '@/utils'
 import { RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEnum'
+import { LoginResult } from './system'
 
 // * 登录
 export const loginApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.SYSTEM}/login`, data);
+    const res = await http(RequestHttpEnum.POST)<LoginResult>(`${ModuleTypeEnum.SYSTEM}/login`, data)
-    return res;
+    return res
   } catch (err) {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
 // * 登出
 export const logoutApi = async () => {
   try {
-    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/logout`);
+    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/logout`)
-    return res;
+    return res
   } catch (err) {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }
 
 // * 获取 oss 上传接口
 export const ossUrlApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/getOssInfo`, data);
+    const res = await http(RequestHttpEnum.GET)<{
-    return res;
+      /**
+       * bucket 地址
+       */
+      bucketURL?: string
+    }>(`${ModuleTypeEnum.SYSTEM}/getOssInfo`, data)
+    return res
   } catch (err) {
-    httpErrorHandle();
+    httpErrorHandle()
   }
 }

src/api/path/system.d.ts

@@ -0,0 +1,26 @@
+export interface LoginResult {
+  token: {
+    /**
+     * token 值
+     */
+    tokenValue: string
+    /**
+     * token key
+     */
+    tokenName: string
+  }
+  userinfo: {
+    /**
+     * 昵称
+     */
+    nickname: string
+    /**
+     * 用户名
+     */
+    username: string
+    /**
+     * 用户 id
+     */
+    id: string
+  }
+}

src/hooks/useSystemInit.hook.ts

@@ -10,8 +10,8 @@ export const useSystemInit = async () => {
 
   // 获取 OSS 信息的 url 地址，用来拼接展示图片的地址
   const getOssUrl = async () => {
-    const res = await ossUrlApi({}) as unknown as MyResponseType
+    const res = await ossUrlApi({})
-    if (res.code === ResultEnum.SUCCESS) {
+    if (res && res.code === ResultEnum.SUCCESS) {
       systemStore.setItem(SystemStoreEnum.FETCH_INFO, {
         OSSUrl: res.data?.bucketURL
       })

src/utils/router.ts

@@ -106,8 +106,8 @@ export const reloadRoutePage = () => {
  */
 export const logout = async () => {
   try {
-    const res = await logoutApi() as unknown as MyResponseType
+    const res = await logoutApi()
-    if(res.code === ResultEnum.SUCCESS) {
+    if(res && res.code === ResultEnum.SUCCESS) {
       window['$message'].success(window['$t']('global.logout_success'))
       clearCookie(RequestHttpHeaderEnum.COOKIE)
       clearLocalStorage(StorageEnum.GO_SYSTEM_STORE)

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -282,9 +282,9 @@ const customRequest = (options: UploadCustomRequestOptions) => {
       )
       let uploadParams = new FormData()
       uploadParams.append('object', newNameFile)
-      const uploadRes = await uploadFile(uploadParams) as unknown as MyResponseType
+      const uploadRes = await uploadFile(uploadParams)
 
-      if(uploadRes.code === ResultEnum.SUCCESS) {
+      if(uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
         chartEditStore.setEditCanvasConfig(
           EditCanvasConfigEnum.BACKGROUND_IMAGE,
           `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}?time=${new Date().getTime()}`

src/views/chart/ContentHeader/headerRightBtn/index.vue

@@ -152,9 +152,9 @@ const sendHandle = async () => {
     id: fetchRouteParamsLocation(),
     // 反过来
     state: release.value ? -1 : 1,
-  })) as unknown as MyResponseType
+  }))
 
-  if (res.code === ResultEnum.SUCCESS) {
+  if (res && res.code === ResultEnum.SUCCESS) {
     modelShowHandle()
     if (!release.value) {
       copyPreviewPath('发布成功！已复制地址到剪贴板~', '发布成功！')

src/views/chart/ContentHeader/headerTitle/index.vue

@@ -67,8 +67,8 @@ const handleBlur = async () => {
   const res = (await updateProjectApi({
     id: fetchRouteParamsLocation(),
     projectName: title.value
-  })) as unknown as MyResponseType
+  }))
-  if (res.code === ResultEnum.SUCCESS) {
+  if (res && res.code === ResultEnum.SUCCESS) {
     dataSyncUpdate()
   } else {
     httpErrorHandle()

src/views/chart/hooks/useSync.hook.ts

@@ -229,8 +229,8 @@ export const useSync = () => {
     chartEditStore.componentList = []
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
     try {
-      const res = await fetchProjectApi({ projectId: fetchRouteParamsLocation() }) as unknown as MyResponseType
+      const res = await fetchProjectApi({ projectId: fetchRouteParamsLocation() })
-      if (res.code === ResultEnum.SUCCESS) {
+      if (res && res.code === ResultEnum.SUCCESS) {
         if (res.data) {
           updateStoreInfo(res.data)
           // 更新全局数据
@@ -278,9 +278,9 @@ export const useSync = () => {
         // 上传预览图
         let uploadParams = new FormData()
         uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`))
-        const uploadRes = await uploadFile(uploadParams) as unknown as MyResponseType
+        const uploadRes = await uploadFile(uploadParams)
         // 保存预览图
-        if(uploadRes.code === ResultEnum.SUCCESS) {
+        if(uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
           await updateProjectApi({
             id: fetchRouteParamsLocation(),
             indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
@@ -295,9 +295,9 @@ export const useSync = () => {
     let params = new FormData()
     params.append('projectId', projectId)
     params.append('content', JSON.stringify(chartEditStore.getStorageInfo || {}))
-    const res= await saveProjectApi(params) as unknown as MyResponseType
+    const res= await saveProjectApi(params)
 
-    if (res.code === ResultEnum.SUCCESS) {
+    if (res && res.code === ResultEnum.SUCCESS) {
       // 成功状态
       setTimeout(() => {
         chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)

src/views/login/index.vue

@@ -207,8 +207,8 @@ const handleSubmit = async (e: Event) => {
       const res = await loginApi({
         username,
         password
-      }) as unknown as MyResponseType
+      })
-      if(res.data) {
+      if(res && res.data) {
         const { tokenValue, tokenName } = res.data.token
         const { nickname, username, id } = res.data.userinfo
 

src/views/preview/utils/storage.ts

@@ -18,8 +18,8 @@ export const getSessionStorageInfo = async () => {
   // 是否本地预览
   if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) {
     // 接口调用
-    const res = await fetchProjectApi({ projectId: id }) as unknown as MyResponseType
+    const res = await fetchProjectApi({ projectId: id })
-    if (res.code === ResultEnum.SUCCESS) {
+    if (res && res.code === ResultEnum.SUCCESS) {
       const { content, state } = res.data
       if (state === -1) {
         // 跳转未发布页

src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts

@@ -27,11 +27,11 @@ export const useDataListInit = () => {
     const res = await projectListApi({
       page: paginat.page,
       limit: paginat.limit
-    }) as any
+    });
-    if (res.data) {
+    if (res &&res.data) {
-      const { count } = res
+      const { count } = res as any; // 这里的count与data平级，不在Response结构中
       paginat.count = count
-      list.value = res.data.map((e: any) => {
+      list.value = res.data.map((e) => {
         const { id, projectName, state, createTime, indexImage, createUserId } = e
         return {
           id: id,
@@ -90,8 +90,8 @@ export const useDataListInit = () => {
       id: id,
       // [-1未发布, 1发布]
       state: !release ? 1 : -1
-    }) as unknown as MyResponseType
+    })
-    if (res.code === ResultEnum.SUCCESS) {
+    if (res && res.code === ResultEnum.SUCCESS) {
       list.value = []
       fetchList()
       // 发布 -> 未发布

src/views/project/items/index.d.ts

@@ -1,7 +1,7 @@
 export type Chartype = {
   id: number | string
   title: string // 标题
-  label: string // 标签
+  label?: string // 标签
   time: string, // 时间
   image: string, // 预览图地址
   createId: string, // 创建者

src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue

@@ -96,8 +96,8 @@ const btnHandle = async (key: string) => {
           remarks: null,
           // 图片地址
           indexImage: null,
-        }) as unknown as MyResponseType
+        })
-        if(res.code === ResultEnum.SUCCESS) {
+        if(res && res.code === ResultEnum.SUCCESS) {
           window['$message'].success(window['$t']('project.create_success'))
 
           const { id } = res.data