mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Merge pull request !103 from 石头web/master-fetch-dev
This commit is contained in:
奔跑的面条 2022-11-28 01:46:22 +00:00 committed by Gitee
commit 4886af4bb5
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
17 changed files with 186 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/axios.ts
View File

@ -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) => {

28
src/api/http.ts
View File

@ -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) => {
return axiosInstance({
export const get = <T = any>(url: string, params?: object) => {
return axiosInstance<T>({
url: url,
method: RequestHttpEnum.GET,
params: params,
})
}
export const post = (url: string, data?: object, headersType?: string) => {
return axiosInstance({
export const post = <T = any>(url: string, data?: object, headersType?: string) => {
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) => {
return axiosInstance({
export const patch = <T = any>(url: string, data?: object, headersType?: string) => {
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) => {
return axiosInstance({
export const put = <T = any>(url: string, data?: object, headersType?: ContentTypeEnum) => {
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) => {
return axiosInstance({
export const del = <T = any>(url: string, params?: object) => {
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];
(target as any)[key] = translateStr(subTarget)
const subTarget = target[key]
target[key] = translateStr(subTarget)
}
}
return target

80
src/api/path/project.api.ts
View File

@ -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);
return res;
try {
const res = await http(RequestHttpEnum.GET)<ProjectItem[]>(`${ModuleTypeEnum.PROJECT}/list`, data)
return res
} catch {
httpErrorHandle();
httpErrorHandle()
}
}
// * 新增项目
export const createProjectApi = async (data: object) => {
try {
const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/create`, data);
return res;
try {
const res = await http(RequestHttpEnum.POST)<{
/**
* 项目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);
return res;
try {
const res = await http(RequestHttpEnum.GET)<ProejctDetail>(`${ModuleTypeEnum.PROJECT}/getData`, data)
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);
return res;
try {
const res = await http(RequestHttpEnum.POST)(
`${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);
return res;
const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/edit`, data)
return res
} catch {
httpErrorHandle();
httpErrorHandle()
}
}
// * 删除项目
export const deleteProjectApi = async (data: object) => {
try {
const res = await http(RequestHttpEnum.DELETE)(`${ModuleTypeEnum.PROJECT}/delete`, data);
return res;
try {
const res = await http(RequestHttpEnum.DELETE)(`${ModuleTypeEnum.PROJECT}/delete`, data)
return res
} catch {
httpErrorHandle();
httpErrorHandle()
}
}
// * 修改发布状态 [-1未发布,1发布]
export const changeProjectReleaseApi = async (data: object) => {
try {
const res = await http(RequestHttpEnum.PUT)(`${ModuleTypeEnum.PROJECT}/publish`, data);
return res;
try {
const res = await http(RequestHttpEnum.PUT)(`${ModuleTypeEnum.PROJECT}/publish`, data)
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);
return res;
try {
const res = await http(RequestHttpEnum.POST)<{
/**
* 文件地址
*/
fileName: string
}>(`${ModuleTypeEnum.PROJECT}/upload`, data, ContentTypeEnum.FORM_DATA)
return res
} catch {
httpErrorHandle();
httpErrorHandle()
}
}
}

39
src/api/path/project.d.ts vendored Normal file
View File

@ -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
}

32
src/api/path/system.api.ts
View File

@ -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);
return res;
} catch(err) {
httpErrorHandle();
const res = await http(RequestHttpEnum.POST)<LoginResult>(`${ModuleTypeEnum.SYSTEM}/login`, data)
return res
} catch (err) {
httpErrorHandle()
}
}
// * 登出
export const logoutApi = async () => {
try {
const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/logout`);
return res;
} catch(err) {
httpErrorHandle();
const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/logout`)
return res
} catch (err) {
httpErrorHandle()
}
}
// * 获取 oss 上传接口
export const ossUrlApi = async (data: object) => {
try {
const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/getOssInfo`, data);
return res;
} catch(err) {
httpErrorHandle();
const res = await http(RequestHttpEnum.GET)<{
/**
* bucket 地址
*/
bucketURL?: string
}>(`${ModuleTypeEnum.SYSTEM}/getOssInfo`, data)
return res
} catch (err) {
httpErrorHandle()
}
}
}

26
src/api/path/system.d.ts vendored Normal file
View File

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

4
src/hooks/useSystemInit.hook.ts
View File

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

4
src/utils/router.ts
View File

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

4
src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
View File

@ -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()}`

4
src/views/chart/ContentHeader/headerRightBtn/index.vue
View File

@ -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('发布成功！已复制地址到剪贴板~', '发布成功！')

4
src/views/chart/ContentHeader/headerTitle/index.vue
View File

@ -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()

12
src/views/chart/hooks/useSync.hook.ts
View File

@ -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
if (res.code === ResultEnum.SUCCESS) {
const res = await fetchProjectApi({ projectId: fetchRouteParamsLocation() })
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)

4
src/views/login/index.vue
View File

@ -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

4
src/views/preview/utils/storage.ts
View File

@ -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
if (res.code === ResultEnum.SUCCESS) {
const res = await fetchProjectApi({ projectId: id })
if (res && res.code === ResultEnum.SUCCESS) {
const { content, state } = res.data
if (state === -1) {
// 跳转未发布页

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

@ -27,11 +27,11 @@ export const useDataListInit = () => {
const res = await projectListApi({
page: paginat.page,
limit: paginat.limit
}) as any
if (res.data) {
const { count } = res
});
if (res &&res.data) {
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()
// 发布 -> 未发布

2
src/views/project/items/index.d.ts vendored
View File

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

4
src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue
View File

@ -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