From 014f728faf463714c6fe522d8fa472a421f229c3 Mon Sep 17 00:00:00 2001 From: Coffee-crocodile <1147347984@qq.com> Date: Thu, 12 Jan 2023 18:06:23 +0800 Subject: [PATCH] =?UTF-8?q?feat(service):=20=E6=B7=BB=E5=8A=A0=E8=AF=B7?= =?UTF-8?q?=E6=B1=82=E6=95=B0=E6=8D=AE=E6=A0=BC=E5=BC=8F=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ src/enum/common.ts | 6 ++++ src/service/http/handle.ts | 15 ++------ src/service/http/instance.ts | 9 ++++- src/service/http/utils.ts | 69 ++++++++++++++++++++++++++++++++++++ src/utils/is.ts | 66 ++++++++++++++++++---------------- 6 files changed, 122 insertions(+), 45 deletions(-) create mode 100644 src/service/http/utils.ts diff --git a/package.json b/package.json index 9382547..2f68c47 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "./src/**/*.{vue,js,jsx,ts,tsx,json}": "eslint --fix" }, "dependencies": { + "@types/qs": "^6.9.7", "@vueuse/core": "^9.10.0", "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.12", @@ -39,6 +40,7 @@ "md-editor-v3": "^2.7.2", "pinia": "^2.0.28", "pinia-plugin-persist": "^1.0.0", + "qs": "^6.11.0", "vue": "^3.2.45", "vue-qr": "^4.0.9", "vue-router": "^4.1.6" diff --git a/src/enum/common.ts b/src/enum/common.ts index 6843b16..f11b548 100644 --- a/src/enum/common.ts +++ b/src/enum/common.ts @@ -9,3 +9,9 @@ export enum EnumStorageKey { /* 标签栏信息 */ tabsRoutes = '__TABS_ROUTES__', } + +export enum EnumContentType { + json = 'application/json', + formUrlencoded = 'application/x-www-form-urlencoded', + formData = 'multipart/form-data', +} diff --git a/src/service/http/handle.ts b/src/service/http/handle.ts index 553c049..a379f0a 100644 --- a/src/service/http/handle.ts +++ b/src/service/http/handle.ts @@ -1,6 +1,5 @@ import type { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios'; import { - ERROR_MSG_DURATION, DEFAULT_REQUEST_ERROR_CODE, DEFAULT_REQUEST_ERROR_MSG, NETWORK_ERROR_CODE, @@ -8,12 +7,11 @@ import { REQUEST_TIMEOUT_CODE, REQUEST_TIMEOUT_MSG, ERROR_STATUS, - ERROR_NO_TIP_STATUS, } from '@/config'; import { useAuthStore } from '@/store'; -import { getRefreshToken } from '@/utils'; import { fetchUpdateToken } from '@/service'; -import { setToken, setRefreshToken } from '@/utils'; +import { setToken, setRefreshToken, getRefreshToken } from '@/utils'; +import { showError } from './utils'; type ErrorStatus = keyof typeof ERROR_STATUS; @@ -141,12 +139,3 @@ export async function handleRefreshToken(config: AxiosRequestConfig) { resetAuthStore(); return null; } - -export function showError(error: Service.RequestError) { - // 如果error不需要提示,则跳过 - const code = Number(error.code); - if (ERROR_NO_TIP_STATUS.includes(code)) return; - - window.console.warn(error.code, error.msg); - window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION }); -} diff --git a/src/service/http/instance.ts b/src/service/http/instance.ts index c144122..9c97c94 100644 --- a/src/service/http/instance.ts +++ b/src/service/http/instance.ts @@ -9,6 +9,7 @@ import { handleServiceResult, handleRefreshToken, } from './handle'; +import { transformRequestData } from './utils'; import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS } from '@/config'; @@ -32,9 +33,15 @@ export default class createAxiosInstance { // 设置类拦截器的函数 setInterceptor() { this.instance.interceptors.request.use( - (config) => { + async (config) => { const handleConfig = { ...config }; if (handleConfig.headers) { + // 数据格式转换 + // handleConfig.headers.setContentType('application/json'); + // const contentType = handleConfig.headers.get('Content-Type'); + const contentType = 'application/json'; + handleConfig.data = await transformRequestData(handleConfig.data, contentType); + // 设置token typeof handleConfig.headers.set === 'function' && handleConfig.headers.set('Authorization', `Bearer ${getToken() || ''}`); diff --git a/src/service/http/utils.ts b/src/service/http/utils.ts new file mode 100644 index 0000000..cbfc7fb --- /dev/null +++ b/src/service/http/utils.ts @@ -0,0 +1,69 @@ +import { ERROR_MSG_DURATION, ERROR_NO_TIP_STATUS } from '@/config'; +import { isArray, isFile } from '@/utils'; +import { EnumContentType } from '@/enum'; +import qs from 'qs'; + +export function showError(error: Service.RequestError) { + // 如果error不需要提示,则跳过 + const code = Number(error.code); + if (ERROR_NO_TIP_STATUS.includes(code)) return; + + window.console.warn(error.code, error.msg); + window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION }); +} +/** + * 请求数据的转换 + * @param requestData - 请求数据 + * @param contentType - 请求头的Content-Type + */ +export async function transformRequestData(requestData: any, contentType?: string) { + // application/json类型不处理 + let data = requestData; + // form类型转换 + if (contentType === EnumContentType.formUrlencoded) { + data = qs.stringify(requestData); + } + // form-data类型转换 + if (contentType === EnumContentType.formData) { + data = await handleFormData(requestData); + } + + return data; +} + +async function handleFormData(data: Record) { + const formData = new FormData(); + const entries = Object.entries(data); + + entries.forEach(async ([key, value]) => { + const isFileType = isFile(value) || (isArray(value) && value.length && isFile(value[0])); + + if (isFileType) { + await transformFile(formData, key, value); + } else { + formData.append(key, value); + } + }); + + return formData; +} + +/** + * 接口为上传文件的类型时数据转换 + * @param key - 文件的属性名 + * @param file - 单文件或多文件 + */ +async function transformFile(formData: FormData, key: string, file: File[] | File) { + if (isArray(file)) { + // 多文件 + await Promise.all( + (file as File[]).map((item) => { + formData.append(key, item); + return true; + }) + ); + } else { + // 单文件 + formData.append(key, file); + } +} diff --git a/src/utils/is.ts b/src/utils/is.ts index 627d941..7b8aa38 100644 --- a/src/utils/is.ts +++ b/src/utils/is.ts @@ -2,87 +2,91 @@ const toString = Object.prototype.toString; export function is(val: unknown, type: string) { - return toString.call(val) === `[object ${type}]`; + return toString.call(val) === `[object ${type}]`; } export function isDef(val?: T): val is T { - return typeof val !== 'undefined'; + return typeof val !== 'undefined'; } export function isUnDef(val?: T): val is T { - return !isDef(val); + return !isDef(val); } export function isObject(val: any): val is Record { - return val !== null && is(val, 'Object'); + return val !== null && is(val, 'Object'); } export function isEmpty(val: T): val is T { - if (isArray(val) || isString(val)) { - return val.length === 0; - } + if (isArray(val) || isString(val)) { + return val.length === 0; + } - if (val instanceof Map || val instanceof Set) { - return val.size === 0; - } + if (val instanceof Map || val instanceof Set) { + return val.size === 0; + } - if (isObject(val)) { - return Object.keys(val).length === 0; - } + if (isObject(val)) { + return Object.keys(val).length === 0; + } - return false; + return false; } export function isDate(val: unknown): val is Date { - return is(val, 'Date'); + return is(val, 'Date'); } export function isNull(val: unknown): val is null { - return val === null; + return val === null; } export function isNullAndUnDef(val: unknown): val is null | undefined { - return isUnDef(val) && isNull(val); + return isUnDef(val) && isNull(val); } export function isNullOrUnDef(val: unknown): val is null | undefined { - return isUnDef(val) || isNull(val); + return isUnDef(val) || isNull(val); } export function isNumber(val: unknown): val is number { - return is(val, 'Number'); + return is(val, 'Number'); } export function isPromise(val: unknown): val is Promise { - return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch); + return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch); } export function isString(val: unknown): val is string { - return is(val, 'String'); + return is(val, 'String'); } export function isFunction(val: unknown): val is Function { - return typeof val === 'function'; + return typeof val === 'function'; +} + +export function isFile(val: T | unknown): val is T { + return is(val, 'File'); } export function isBoolean(val: unknown): val is boolean { - return is(val, 'Boolean'); + return is(val, 'Boolean'); } export function isRegExp(val: unknown): val is RegExp { - return is(val, 'RegExp'); + return is(val, 'RegExp'); } export function isArray(val: any): val is Array { - return val && Array.isArray(val); + return val && Array.isArray(val); } export function isWindow(val: any): val is Window { - return typeof window !== 'undefined' && is(val, 'Window'); + return typeof window !== 'undefined' && is(val, 'Window'); } export function isElement(val: unknown): val is Element { - return isObject(val) && !!val.tagName; + return isObject(val) && !!val.tagName; } export const isServer = typeof window === 'undefined'; @@ -90,8 +94,8 @@ export const isServer = typeof window === 'undefined'; export const isClient = !isServer; export function isUrl(path: T): boolean { - const reg = - /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/; - // @ts-expect-error - return reg.test(path); + const reg = + /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/; + // @ts-expect-error + return reg.test(path); }