支持下载请求,返回值展示优化

This commit is contained in:
暮光:城中城
2021-11-15 23:11:19 +08:00
parent 1ba75d3e29
commit 157d06bf8d
6 changed files with 164 additions and 65 deletions

View File

@@ -1,8 +1,8 @@
<template>
<div>
<a-input-search :addon-before="docInfoShow.method.toUpperCase()" v-model:value="docUrl" @search="sendRequest">
<a-input-search :addon-before="docInfoShow.method.toUpperCase()" v-model:value="docUrl" @search="sendRequest" placeholder="请输入目标URL地址">
<template #enterButton>
<a-button type="primary" :loading="requestLoading">发送请求</a-button>
<a-button type="primary" :loading="requestLoading">{{isDownloadRequest?'下载文件':'发送请求'}}</a-button>
</template>
</a-input-search>
<a-tabs v-model:activeKey="activePage" closable @tab-click="activePageChange" style="padding: 5px 10px 0;">
@@ -19,7 +19,7 @@
<a-radio value="form">form-data</a-radio>
<a-radio value="formUrlEncode">x-www-form-urlencoded</a-radio>
<a-radio value="row">row</a-radio>
<a-radio value="binary">binary</a-radio>
<!-- <a-radio value="binary">binary</a-radio>-->
</a-radio-group>
<a-select v-if="bodyParamType === 'row'" v-model:value="consumesParamType" size="small" style="margin-left: 10px;vertical-align: top;width: 100px;">
<a-select-option value="json">JSON</a-select-option>
@@ -55,7 +55,10 @@
<a-button v-else @click="showQueryParam" type="link">展开参数</a-button>
</template>
</a-tabs>
<DocDebuggerResult :result="requestResult" :loading="requestLoading"></DocDebuggerResult>
<DocDebuggerResult v-if="!isDownloadRequest" :result="requestResult" :loading="requestLoading"></DocDebuggerResult>
<form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
<input type="hidden" :name="key" :value="val" v-for="(val,key) in downloadFormParam.param">
</form>
</div>
</template>
@@ -72,6 +75,7 @@
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
import {zyplayerApi} from "../../../api";
import {getZyplayerApiBaseUrl} from "../../../api/request/utils.js";
export default {
props: {
@@ -178,7 +182,14 @@
// 发送请求
let requestResult = ref({});
let requestLoading = ref(false);
let downloadFormParam = ref({url: getZyplayerApiBaseUrl() + '/doc-swagger/proxy/download', param: {}});
let downloadFormRef = ref();
let isDownloadRequest = (props.docInfoShow.produces === 'application/octet-stream');
const sendRequest = () => {
if (!docUrl.value) {
message.error('请输入请求的目标URL地址');
return;
}
const formData = new FormData();
let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
@@ -216,23 +227,40 @@
// formData.append('files[]', file);
// });
let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value;
formData.append('url', url);
formData.append('host', urlDomain);
formData.append('method', props.docInfoShow.method);
formData.append('contentType', props.docInfoShow.consumes);
formData.append('headerParam', JSON.stringify(headerParamArr));
formData.append('cookieParam', JSON.stringify(cookieParamArr));
formData.append('formParam', JSON.stringify(formParamArr));
formData.append('formEncodeParam', JSON.stringify(formEncodeParamArr));
formData.append('bodyParam', bodyParamStr);
requestLoading.value = true;
requestResult.value = {};
zyplayerApi.requestUrl(formData).then(res => {
requestResult.value = res;
requestLoading.value = false;
}).catch(e => {
requestLoading.value = false;
});
// 下载请求
if (isDownloadRequest) {
downloadFormParam.value.param = {
url: url,
host: urlDomain,
method: props.docInfoShow.method,
contentType: props.docInfoShow.consumes,
headerParam: JSON.stringify(headerParamArr),
cookieParam: JSON.stringify(cookieParamArr),
formParam: JSON.stringify(formParamArr),
formEncodeParam: JSON.stringify(formEncodeParamArr),
bodyParam: bodyParamStr,
};
setTimeout(() => downloadFormRef.value.submit(), 0);
} else {
// 正常请求
formData.append('url', url);
formData.append('host', urlDomain);
formData.append('method', props.docInfoShow.method);
formData.append('contentType', props.docInfoShow.consumes);
formData.append('headerParam', JSON.stringify(headerParamArr));
formData.append('cookieParam', JSON.stringify(cookieParamArr));
formData.append('formParam', JSON.stringify(formParamArr));
formData.append('formEncodeParam', JSON.stringify(formEncodeParamArr));
formData.append('bodyParam', bodyParamStr);
requestLoading.value = true;
requestResult.value = {};
zyplayerApi.requestUrl(formData).then(res => {
requestResult.value = res;
requestLoading.value = false;
}).catch(e => {
requestLoading.value = false;
});
}
};
let queryParamVisible = ref(true);
const hideQueryParam = () => {
@@ -252,6 +280,9 @@
sendRequest,
requestResult,
consumesParamType,
downloadFormParam,
downloadFormRef,
isDownloadRequest,
// url参数
urlParamRef,
urlParamList,