vue-api-request-builder 0.1.0 → 0.2.1

package/lib/components/ResponseSection.vue

@@ -1,144 +0,0 @@
-<template>
-  <a-card title="响应" class="form-section" size="small">
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
-      <a-radio-group v-model:value="requestMethod" button-style="solid" size="small">
-        <a-radio-button value="xhr">XMLHttpRequest</a-radio-button>
-        <a-radio-button value="fetch">Fetch</a-radio-button>
-      </a-radio-group>
-      <a-button type="primary" @click="sendRequest" size="small">发送</a-button>
-    </div>
-
-    <a-alert
-      v-if="errorMessage"
-      :message="errorMessage"
-      type="error"
-      show-icon
-      style="margin-bottom: 8px"
-    />
-
-    <div class="flex flex-col gap-2">
-      <div class="text-sm font-bold">基本信息</div>
-      <div class="flex flex-col gap-1">
-        <div>
-          <span>状态码:</span>
-          <a-tag :color="getStatusColor(response.status)">{{ response.status }}</a-tag>
-        </div>
-        <div>
-          <span>耗时:</span>
-          <span>{{ response.timing ? `${response.timing}ms` : "-" }}</span>
-        </div>
-      </div>
-      <div class="text-sm font-bold">响应头</div>
-      <template v-if="Object.keys(response.headers).length > 0">
-        <table class="border border-solid border-gray-300 w-full">
-          <tbody>
-            <tr v-for="[key, value] in Object.entries(response.headers)" :key="key">
-              <td class="border border-gray-300">{{ key }}</td>
-              <td class="border border-gray-300">{{ value }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </template>
-      <p v-else>无响应头</p>
-      <div class="text-sm font-bold">响应体</div>
-      <a-textarea
-        v-model:value="response.body"
-        :rows="5"
-        readonly
-        style="width: 100%"
-        size="small"
-      />
-    </div>
-  </a-card>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import type { RequestSchema, ResponseData } from "../types/request";
-import { executeRequest, type RequestMethod } from "../utils/request";
-
-interface Props {
-  modelValue: RequestSchema;
-}
-
-const props = defineProps<Props>();
-
-const requestMethod = ref<RequestMethod>("xhr");
-const response = ref<ResponseData>({
-  status: "",
-  headers: {},
-  body: "",
-  timing: 0,
-});
-const errorMessage = ref<string>("");
-
-const getStatusColor = (status: string | number): string => {
-  const statusNum = Number(status);
-  if (statusNum >= 200 && statusNum < 300) return "success";
-  if (statusNum >= 300 && statusNum < 400) return "warning";
-  if (statusNum >= 400 && statusNum < 500) return "error";
-  if (statusNum >= 500) return "error";
-  return "default";
-};
-
-const getErrorMessage = (error: unknown): string => {
-  if (error instanceof Error) {
-    return error.message;
-  }
-
-  return "请求失败";
-};
-
-const sendRequest = async () => {
-  errorMessage.value = "";
-  const startTime = Date.now();
-  try {
-    response.value = await executeRequest(props.modelValue, requestMethod.value);
-    response.value.timing = Date.now() - startTime;
-  } catch (error) {
-    errorMessage.value = getErrorMessage(error);
-    response.value = {
-      status: "Error",
-      headers: {},
-      body: error instanceof Error ? error.message : "Request failed",
-      timing: Date.now() - startTime,
-    };
-  }
-};
-</script>
-
-<style scoped>
-.form-section {
-  margin-bottom: 8px;
-}
-
-.response-section {
-  margin-bottom: 16px;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f1f1f;
-  margin-bottom: 8px;
-  padding-left: 4px;
-  border-left: 3px solid #1890ff;
-}
-
-:deep(.ant-card-head) {
-  background-color: #fafafa;
-}
-
-:deep(.ant-card-head-title) {
-  font-weight: 500;
-  padding: 4px 0;
-}
-
-:deep(.ant-card-body) {
-  padding: 8px 12px;
-}
-
-:deep(.ant-descriptions-item-label) {
-  font-weight: 500;
-}
-</style>

package/lib/index.ts

@@ -1,17 +0,0 @@
-import RequestForm from './components/RequestForm.vue';
-import KeyValueInput from './components/KeyValueInput.vue';
-import type { RequestSchema, KeyValuePair, ResponseData } from './types/request';
-import { defaultRequestSchema } from './types/request';
-import { executeRequest } from './utils/request';
-
-export {
-  RequestForm,
-  KeyValueInput,
-  type RequestSchema,
-  type KeyValuePair,
-  type ResponseData,
-  defaultRequestSchema,
-  executeRequest
-};
-
-export default RequestForm; 

package/lib/types/request.ts

@@ -1,55 +0,0 @@
-// 基础键值对类型
-export interface KeyValuePair {
-  key: string;
-  value: string;
-}
-
-// 认证相关类型
-export interface AuthConfig {
-  type: 'none' | 'Basic' | 'Bearer';
-  username?: string;
-  password?: string;
-  token?: string;
-}
-
-// 请求体类型
-export interface RequestBody {
-  type: 'application/json' | 'multipart/form-data' | 'text/plain';
-  json?: string;
-  formData?: KeyValuePair[];
-  raw?: string;
-}
-
-// 响应类型
-export interface ResponseData {
-  status: string;
-  headers: Record<string, string>;
-  body: string;
-  timing?: number;
-}
-
-// 完整的请求Schema类型
-export interface RequestSchema {
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS';
-  url: string;
-  path: string;
-  auth: AuthConfig;
-  params: KeyValuePair[];
-  headers: KeyValuePair[];
-  body: RequestBody;
-}
-
-// 默认的请求Schema
-export const defaultRequestSchema: RequestSchema = {
-  method: 'GET',
-  url: 'https://yesno.wtf',
-  path: '/api',
-  auth: {
-    type: 'none'
-  },
-  params: [],
-  headers: [],
-  body: {
-    type: 'application/json'
-  },
-};

package/lib/utils/request.ts

@@ -1,194 +0,0 @@
-import type { RequestSchema, ResponseData } from '../types/request';
-
-export type RequestMethod = 'fetch' | 'xhr';
-
-export async function executeRequest(schema: RequestSchema, method: RequestMethod = 'xhr'): Promise<ResponseData> {
-  if (method === 'fetch') {
-    return executeFetchRequest(schema);
-  } else {
-    return executeXHRRequest(schema);
-  }
-}
-
-async function executeFetchRequest(schema: RequestSchema): Promise<ResponseData> {
-  // Build URL with query parameters
-  const queryString = schema.params
-    .filter(p => !!p.key)
-    .map(p => `${p.key}=${encodeURIComponent(p.value)}`)
-    .join('&');
-  const fullUrl = `${schema.url}${schema.path}${queryString ? '?' + queryString : ''}`;
-
-  // Prepare headers
-  const headers = new Headers();
-  schema.headers.forEach(header => {
-    if (header.key) {
-      headers.append(header.key, header.value);
-    }
-  });
-
-  // Prepare request options
-  const options: RequestInit = {
-    method: schema.method,
-    headers,
-    credentials: 'omit'
-  };
-
-  // Handle authentication
-  if (schema.auth.type === 'Basic' && schema.auth.username && schema.auth.password) {
-    const auth = btoa(`${schema.auth.username}:${schema.auth.password}`);
-    headers.append('Authorization', `Basic ${auth}`);
-  } else if (schema.auth.type === 'Bearer' && schema.auth.token) {
-    headers.append('Authorization', `Bearer ${schema.auth.token}`);
-  }
-
-  // Handle request body for POST/PUT methods
-  if (schema.method === 'POST' || schema.method === 'PUT') {
-    switch (schema.body.type) {
-      case 'application/json':
-        options.body = schema.body.json || '';
-        headers.set('Content-Type', 'application/json; charset=utf-8');
-        break;
-      case 'multipart/form-data':
-        const formData = new FormData();
-        schema.body.formData?.forEach(param => {
-          if (param.key) {
-            formData.append(param.key, param.value);
-          }
-        });
-        options.body = formData;
-        break;
-      case 'text/plain':
-        options.body = schema.body.raw || '';
-        headers.set('Content-Type', 'text/plain; charset=utf-8');
-        break;
-    }
-  }
-
-  try {
-    const response = await fetch(fullUrl, options);
-    const headers: Record<string, string> = {};
-    response.headers.forEach((value, key) => {
-      headers[key.toLowerCase()] = value;
-    });
-
-    let body = '';
-    const contentType = headers['content-type'] || '';
-    if (contentType.startsWith('application/json')) {
-      try {
-        const json = await response.json();
-        body = JSON.stringify(json, null, 2);
-      } catch (e) {
-        body = await response.text();
-      }
-    } else {
-      body = await response.text();
-    }
-
-    return {
-      status: response.status.toString(),
-      headers,
-      body
-    };
-  } catch (error) {
-    throw new Error('Request failed');
-  }
-}
-
-async function executeXHRRequest(schema: RequestSchema): Promise<ResponseData> {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    const user = schema.auth.type === 'Basic' ? schema.auth.username : null;
-    const pswd = schema.auth.type === 'Basic' ? schema.auth.password : null;
-
-    // Build URL with query parameters
-    const queryString = schema.params
-      .filter(p => !!p.key)
-      .map(p => `${p.key}=${encodeURIComponent(p.value)}`)
-      .join('&');
-    const fullUrl = `${schema.url}${schema.path}${queryString ? '?' + queryString : ''}`;
-
-    xhr.open(schema.method, fullUrl, true, user, pswd);
-
-    // Add headers
-    schema.headers.forEach(header => {
-      if (header.key) {
-        xhr.setRequestHeader(header.key, header.value);
-      }
-    });
-
-    // Add Bearer token if present
-    if (schema.auth.type === 'Bearer' && schema.auth.token) {
-      xhr.setRequestHeader('Authorization', `Bearer ${schema.auth.token}`);
-    }
-
-    // Handle request body for POST/PUT methods
-    if (schema.method === 'POST' || schema.method === 'PUT') {
-      let requestBody = '';
-      
-      switch (schema.body.type) {
-        case 'application/json':
-          requestBody = schema.body.json || '';
-          xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
-          break;
-        case 'multipart/form-data':
-          const formData = new FormData();
-          schema.body.formData?.forEach(param => {
-            if (param.key) {
-              formData.append(param.key, param.value);
-            }
-          });
-          requestBody = formData as any;
-          // Let browser handle multipart/form-data Content-Type and boundary
-          break;
-        case 'text/plain':
-          requestBody = schema.body.raw || '';
-          xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
-          break;
-      }
-
-      xhr.send(requestBody);
-    } else {
-      xhr.send();
-    }
-
-    xhr.onload = () => {
-      const headers = parseHeaders(xhr);
-      const response: ResponseData = {
-        status: xhr.status.toString(),
-        headers,
-        body: ''
-      };
-
-      if ((headers['content-type'] || '').startsWith('application/json')) {
-        try {
-          response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2);
-        } catch (e) {
-          response.body = xhr.responseText;
-        }
-      } else {
-        response.body = xhr.responseText;
-      }
-
-      resolve(response);
-    };
-
-    xhr.onerror = () => {
-      reject(new Error('Request failed'));
-    };
-  });
-}
-
-function parseHeaders(xhr: XMLHttpRequest): Record<string, string> {
-  const headers = xhr
-    .getAllResponseHeaders()
-    .trim()
-    .split(/[\r\n]+/);
-  const headerMap: Record<string, string> = {};
-  headers.forEach(function (line) {
-    const parts = line.split(': ');
-    const header = parts.shift()?.toLowerCase() || '';
-    const value = parts.join(': ');
-    headerMap[header] = value;
-  });
-  return headerMap;
-}