mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-04 21:37:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: final modifs

Browse source
This commit is contained in:
ShareVB 2024-06-16 21:39:55 +02:00
parent 43922ae5f9
commit 130183cb36
3 changed files with 92 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/tools/api-tester/api-tester.vue
View file

@ -10,31 +10,47 @@ const baseUrl = useQueryParamOrStorage({ name: 'url', storageName: 'api-tester:u
const method = useQueryParamOrStorage({ name: 'method', storageName: 'api-tester:m', defaultValue: 'POST' });
const queryParams = useQueryParamOrStorage<KeyValuePair[]>({ name: 'params', storageName: 'api-tester:params', defaultValue: [] });
const headers = useQueryParamOrStorage<KeyValuePair[]>({ name: 'headers', storageName: 'api-tester:headers', defaultValue: [] });
const contentType = useQueryParamOrStorage({ name: 'ct', storageName: 'api-tester:ct', defaultValue: 'application/json' });
const body = useQueryParamOrStorage({ name: 'body', storageName: 'api-tester:body', defaultValue: '' });
const noCORS = ref(false);
const apiCallResult = ref();
const inprogress = ref(false);
async function callAPI() {
const url = new URL(baseUrl.value);
for (const kv of queryParams.value) {
if (!kv.key) {
continue;
}
url.searchParams.append(kv.key, kv.value || '');
}
const queryHeaders = [] as [string, string][];
for (const kv of headers.value) {
if (!kv.key) {
continue;
}
queryHeaders.push([kv.key, kv.value || '']);
}
queryHeaders.push(['Content-Type', contentType.value || '']);
try {
const response = await fetch(url, {
method: method.value,
headers: queryHeaders,
body: body.value,
body: (method.value === 'GET' || method.value === 'HEAD') ? null : body.value,
mode: noCORS.value ? 'no-cors' : 'cors',
});
let responseText = await response.text();
try {
responseText = JSON.stringify(JSON.parse(responseText), null, 2);
}
catch (_) {
}
apiCallResult.value = {
code: response.status,
error: '',
result: await response.text(),
result: responseText,
};
}
catch (err: any) {
@ -45,11 +61,18 @@ async function callAPI() {
};
}
}
function emptyKeyPair() {
return {
key: '',
value: '',
};
}
</script>
<template>
<div>
<c-card title="">
<c-card title="API Calling">
<c-input-text
v-model:value="baseUrl"
label="Base API Url"
@ -61,36 +84,44 @@ async function callAPI() {
v-model:value="method"
label="HTTP Method:"
:options="['GET', 'POST', 'PUT', 'DELETE', 'PATCH']"
mb-2
/>
<c-card title="Headers" mb-2>
<n-dynamic-input v-model:value="headers">
<n-dynamic-input v-model:value="headers" :on-create="emptyKeyPair">
<template #create-button-default>
Add a new HTTP Header
</template>
<template #default="{ value }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="value.key" type="text" />
<n-input v-model:value="value.value" type="text" />
<div v-if="value" w-100 flex justify-center gap-2>
<c-input-text v-model:value="value.key" placeholder="Header Name" type="text" />
<c-input-text v-model:value="value.value" placeholder="Value" type="text" />
</div>
</template>
</n-dynamic-input>
<c-select
v-model:value="contentType"
label="Content-Type:"
:options="['application/json', 'text/plain']"
mt-2
/>
</c-card>
<c-card title="Query Parameters" mb-2>
<n-dynamic-input v-model:value="queryParams">
<n-dynamic-input v-model:value="queryParams" :on-create="emptyKeyPair">
<template #create-button-default>
Add a new HTTP Header
Add a new Query Parameter
</template>
<template #default="{ value }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="value.key" type="text" />
<n-input v-model:value="value.value" type="text" />
<div v-if="value" w-100 flex justify-center gap-2>
<c-input-text v-model:value="value.key" placeholder="Param Name" type="text" />
<c-input-text v-model:value="value.value" placeholder="Value" type="text" />
</div>
</template>
</n-dynamic-input>
</c-card>
<c-input-text
v-if="method !== 'GET' && method !== 'HEAD'"
v-model:value="body"
label="Body"
placeholder="HTTP Query body"
@ -99,20 +130,26 @@ async function callAPI() {
mb-2
/>
<c-button secondary @click="callAPI">
Call API
</c-button>
<n-checkbox v-model:checked="noCORS">
No CORS
</n-checkbox>
<div mt-5 flex justify-center>
<c-button secondary @click="callAPI">
Call API
</c-button>
</div>
</c-card>
<n-spin
v-if="inprogress"
size="small"
/>
<c-alert v-if="!inprogress && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
<c-alert v-if="!inprogress && apiCallResult && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
<p><strong>Status code = {{ apiCallResult.code }}</strong></p>
<TextareaCopyable :value="apiCallResult.error" />
<TextareaCopyable :value="apiCallResult.error" copy-placement="none" />
</c-alert>
<c-card v-if="!inprogress && apiCallResult.code === 200" mt-12 title="API Call result">
<TextareaCopyable :value="apiCallResult.result" />
<c-card v-if="!inprogress && apiCallResult && apiCallResult.code === 200" mt-12 title="API Call result">
<TextareaCopyable :value="apiCallResult.result" word-wrap />
</c-card>
</div>
</template>