From ca587c9ee3fed8100b876f738bb385f8011e6503 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Wed, 20 Jul 2022 12:19:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E8=AF=B7=E6=B1=82=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/axios.ts | 1 - src/api/http.ts | 118 +++++++++++++++++- src/enums/httpEnum.ts | 8 +- src/packages/public/publicConfig.ts | 1 - .../modules/chartEditStore/chartEditStore.ts | 1 - src/utils/utils.ts | 17 ++- .../components/ChartDataAjax/index.vue | 66 ++++++---- .../ChartDataMonacoEditor/index.vue | 17 +-- .../RequestGlobalHeaderTable/index.vue | 4 +- .../components/RequestHeader/index.vue | 24 ++-- 10 files changed, 198 insertions(+), 59 deletions(-) diff --git a/src/api/axios.ts b/src/api/axios.ts index 2e20ebd0..c913ea09 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -10,7 +10,6 @@ const axiosInstance = axios.create({ axiosInstance.interceptors.request.use( (config: AxiosRequestConfig) => { - config.headers = {} return config }, (error: AxiosRequestConfig) => { diff --git a/src/api/http.ts b/src/api/http.ts index ce963506..f6657c65 100644 --- a/src/api/http.ts +++ b/src/api/http.ts @@ -1,5 +1,12 @@ import axiosInstance from './axios' -import { RequestHttpEnum, ContentTypeEnum } from '@/enums/httpEnum' +import { + RequestHttpEnum, + ContentTypeEnum, + RequestBodyEnum, + RequestDataTypeEnum, + RequestContentTypeEnum, + RequestParamsObjType +} from '@/enums/httpEnum' import type { RequestGlobalConfigType, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' export const get = (url: string, params?: object) => { @@ -74,7 +81,110 @@ export const http = (type?: RequestHttpEnum) => { } } -// 自定义请求 -export const customizeHttp = (comParams: RequestConfigType, globalParams: RequestGlobalConfigType) => { - +/** + * * 自定义请求 + * @param targetParams 当前组件参数 + * @param globalParams 全局参数 + */ +export const customizeHttp = (targetParams: RequestConfigType, globalParams: RequestGlobalConfigType) => { + if(!targetParams || !globalParams) { + return + } + + // 全局 + const { + // 全局请求源地址 + requestOriginUrl, + // 全局请求内容 + requestParams: globalRequestParams + } = globalParams + + // 目标组件（优先级 > 全局组件） + const { + // 请求地址 + requestUrl, + // 普通 / sql + requestContentType, + // 获取数据的方式 + requestDataType, + // 请求方式 get/post/del/put/patch + requestHttpType, + // 请求体类型 none / form-data / x-www-form-urlencoded / json /xml + requestParamsBodyType, + // SQL 请求对象 + requestSQLContent, + // 请求内容 params / cookie / header / body: 同 requestParamsBodyType + requestParams: targetRequestParams + } = targetParams + + // 静态排除 + if (requestDataType === RequestDataTypeEnum.STATIC) return + + if (!requestUrl) { + return + } + + // 处理头部 + const headers: RequestParamsObjType = { + ...globalRequestParams.Header, + ...targetRequestParams.Header, + } + + // data 参数 + let data: RequestParamsObjType | FormData | string = {} + // params 参数 + let params: RequestParamsObjType = targetRequestParams.Params + // form 类型处理 + let formData: FormData = new FormData() + formData.set('default', 'defaultData') + // 类型处理 + + switch (requestParamsBodyType) { + case RequestBodyEnum.NONE: + break + + case RequestBodyEnum.JSON: + headers['Content-Type'] = ContentTypeEnum.JSON + data = JSON.parse(targetRequestParams.Body['json']) + // json 赋值给 data + break + + case RequestBodyEnum.XML: + headers['Content-Type'] = ContentTypeEnum.XML + // xml 字符串赋值给 data + data = targetRequestParams.Body['xml'] + break + + case RequestBodyEnum.X_WWW_FORM_URLENCODED: + headers['Content-Type'] = ContentTypeEnum.FORM_URLENCODED + const bodyFormData = targetRequestParams.Body['x-www-form-urlencoded'] + for (const i in bodyFormData) formData.set(i, bodyFormData[i]) + // FormData 赋值给 data + data = formData + break + + case RequestBodyEnum.FORM_DATA: + headers['Content-Type'] = ContentTypeEnum.FORM_DATA + const bodyFormUrlencoded = targetRequestParams.Body['form-data'] + for (const i in bodyFormUrlencoded) { + formData.set(i, bodyFormUrlencoded[i]) + } + // FormData 赋值给 data + data = formData + break + } + + // sql 处理 + if (requestContentType === RequestContentTypeEnum.SQL) { + headers['Content-Type'] = ContentTypeEnum.JSON + data = requestSQLContent + } + + return axiosInstance({ + url: `${requestOriginUrl}${requestUrl}`, + method: requestHttpType, + data, + params, + headers + }) } diff --git a/src/enums/httpEnum.ts b/src/enums/httpEnum.ts index 100a0392..ffc98893 100644 --- a/src/enums/httpEnum.ts +++ b/src/enums/httpEnum.ts @@ -90,7 +90,6 @@ export enum RequestParamsTypeEnum { PARAMS = 'Params', BODY = 'Body', HEADER = 'Header', - COOKIE = 'Cookie' } /** @@ -101,7 +100,6 @@ export type RequestParamsObjType = { } export type RequestParams = { [RequestParamsTypeEnum.PARAMS]: RequestParamsObjType - [RequestParamsTypeEnum.COOKIE]: RequestParamsObjType [RequestParamsTypeEnum.HEADER]: RequestParamsObjType [RequestParamsTypeEnum.BODY]: { [RequestBodyEnum.FORM_DATA]: RequestParamsObjType @@ -117,9 +115,11 @@ export type RequestParams = { export enum ContentTypeEnum { // json JSON = 'application/json;charset=UTF-8', - // json + // text TEXT = 'text/plain;charset=UTF-8', - // form-data 一般配合qs + // xml + XML = 'application/xml;charset=UTF-8', + // application/x-www-form-urlencoded 一般配合qs FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8', // form-data 上传 FORM_DATA = 'multipart/form-data;charset=UTF-8' diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 0eff7f5e..8a3bd08a 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -28,7 +28,6 @@ const requestConfig: RequestConfigType = { json: '', xml: '' }, - Cookie: {}, Header: {}, Params: {} } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index ebb7a014..f2305995 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -119,7 +119,6 @@ export const useChartEditStore = defineStore({ json: '', xml: '' }, - Cookie: {}, Header: {}, Params: {} } diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 7253ee9d..b3ffa42f 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -7,7 +7,7 @@ import html2canvas from 'html2canvas' import { downloadByA } from './file' import { toString } from './type' import cloneDeep from 'lodash/cloneDeep' -import { RequestHttpIntervalEnum } from '@/enums/httpEnum' +import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum' /** * * 判断是否是开发环境 @@ -240,3 +240,18 @@ export const intervalUnitHandle = (num: number, unit: RequestHttpIntervalEnum) = return num * 1000 } } + +/** + * * 对象转换 cookie 格式 + * @param obj + * @returns string + */ +export const objToCookie = (obj: RequestParamsObjType) => { + if(!obj) return '' + + let str = '' + for (const key in obj) { + str += key + '=' + obj[key] + ';' + } + return str.substr(0, str.length - 1) +} diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue index 140f20e3..c265cf81 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -1,16 +1,28 @@