当前版本为 Beta，可能不稳定。请谨慎使用。

ApiTester

简介

ApiTester 组件是一个完整的API测试工具，提供多个API端点的测试界面。支持参数配置、快速测试、请求发送和结果展示等功能，是开发和调试API接口的理想工具。

组件特性：

支持多种HTTP方法（GET、POST、PUT、DELETE、PATCH）
支持多种参数类型（文本、数字、选择器、复选框、单选框等）
支持参数验证（必填、最小值、最大值、正则表达式等）
支持快速测试预设参数组合
支持自定义请求头配置
显示详细的响应信息和响应时间
完善的错误处理和用户反馈

案例

用户API测试

测试用户相关的所有API接口

获取用户信息

GET

/api/users/1

根据用户ID获取用户详细信息

创建用户

POST

/api/users

创建新用户

请求参数：

username *

email * 请输入有效的邮箱地址

用户登录

POST

/api/auth/login

用户登录认证

请求参数：

username *

password *

快速填充参数：

---
/**
 * @component ApiTesterExample
 * @description API测试组件主要示例
 */
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
  {
    name: '创建用户',
    method: 'POST',
    path: '/api/users',
    description: '创建新用户',
    params: [
      {
        name: 'username',
        placeholder: '请输入用户名',
        type: 'text',
        required: true,
      },
      {
        name: 'email',
        placeholder: '请输入邮箱',
        type: 'text',
        required: true,
        validation: {
          pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
          message: '请输入有效的邮箱地址',
        },
      },
    ],
  },
  {
    name: '用户登录',
    method: 'POST',
    path: '/api/auth/login',
    description: '用户登录认证',
    params: [
      {
        name: 'username',
        placeholder: '用户名',
        type: 'text',
        required: true,
      },
      {
        name: 'password',
        placeholder: '密码',
        type: 'text',
        required: true,
      },
    ],
    quickTests: [
      {
        label: '测试账号',
        values: {
          username: 'testuser',
          password: 'testpass',
        },
        description: '使用测试账号快速登录',
      },
    ],
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="用户API测试"
  description="测试用户相关的所有API接口"
/>

Props

endpoints

API端点配置列表，每个端点包含名称、方法、路径、描述、参数等信息。

端点配置示例

获取用户信息

GET

/api/users/1

根据用户ID获取用户详细信息

创建用户

POST

/api/users

创建新用户

请求参数：

username *

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
  {
    name: '创建用户',
    method: 'POST',
    path: '/api/users',
    description: '创建新用户',
    params: [
      {
        name: 'username',
        placeholder: '请输入用户名',
        type: 'text',
        required: true,
      },
    ],
  },
];
---

<ApiTester endpoints={sampleEndpoints} title="端点配置示例" />

title

组件标题，用于显示在页面顶部。

自定义标题示例

获取用户信息

GET

/api/users/1

根据用户ID获取用户详细信息

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester endpoints={sampleEndpoints} title="自定义标题示例" />

description

组件描述，用于说明API测试的用途和范围。

用户API测试

这是一个详细的描述，说明API测试的用途和范围。可以包含多行文本内容。

获取用户信息

GET

/api/users/1

根据用户ID获取用户详细信息

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="用户API测试"
  description="这是一个详细的描述，说明API测试的用途和范围。可以包含多行文本内容。"
/>

showHeaders

是否显示请求头配置区域，设置为 true 时用户可以自定义请求头。

请求头配置示例

请求头配置

Authorization

X-API-Version

获取用户列表

GET

/api/users

获取用户列表，支持分页和筛选

---
import { ApiTester } from '@coffic/cosy-ui';

const endpointsWithHeaders = [
  {
    name: '获取用户列表',
    method: 'GET',
    path: '/api/users',
    description: '获取用户列表，支持分页和筛选',
  },
];
---

<ApiTester
  endpoints={endpointsWithHeaders}
  title="请求头配置示例"
  showHeaders={true}
  defaultHeaders={{
    Authorization: 'Bearer your-token-here',
    'X-API-Version': 'v1',
  }}
/>

defaultHeaders

默认请求头配置，可以预设常用的认证信息等。

默认请求头示例

请求头配置

Authorization

X-API-Version

Accept-Language

获取用户列表

GET

/api/users

获取用户列表，支持分页和筛选

---
import { ApiTester } from '@coffic/cosy-ui';

const endpointsWithHeaders = [
  {
    name: '获取用户列表',
    method: 'GET',
    path: '/api/users',
    description: '获取用户列表，支持分页和筛选',
  },
];
---

<ApiTester
  endpoints={endpointsWithHeaders}
  title="默认请求头示例"
  showHeaders={true}
  defaultHeaders={{
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
    'X-API-Version': 'v1',
    'Accept-Language': 'zh-CN',
  }}
/>

showResponseTime

是否显示响应时间，设置为 true 时会在结果中显示请求耗时。

响应时间显示示例

获取用户信息

GET

/api/users/1

根据用户ID获取用户详细信息

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="响应时间显示示例"
  showResponseTime={true}
/>

showRequestDetails

是否显示请求详情，设置为 true 时会显示完整的请求URL等信息。

请求详情显示示例

获取用户信息

GET

/api/users/1

根据用户ID获取用户详细信息

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="请求详情显示示例"
  showRequestDetails={true}
/>

class

自定义CSS类名，用于覆盖默认样式。

自定义样式示例

获取用户信息

GET

/api/users/1

根据用户ID获取用户详细信息

---
import { ApiTester } from '@coffic/cosy-ui';

const sampleEndpoints = [
  {
    name: '获取用户信息',
    method: 'GET',
    path: '/api/users/1',
    description: '根据用户ID获取用户详细信息',
  },
];
---

<ApiTester
  endpoints={sampleEndpoints}
  title="自定义样式示例"
  class="border-2 border-primary rounded-xl p-6"
/>

端点配置

每个API端点支持以下配置选项：

name

端点名称，用于显示在卡片标题中。

method

HTTP请求方法，支持 GET、POST、PUT、DELETE、PATCH。

path

API端点路径，可以是相对路径或绝对URL。

description

端点描述，用于说明该API的用途。

params

请求参数配置，支持多种输入类型和验证规则。

quickTests

快速测试配置，预设常用的参数组合。

参数类型

text

文本输入框，支持任意文本内容。

number

数字输入框，支持数值输入和范围验证。

select

下拉选择器，从预设选项中选择值。

textarea

多行文本输入框，适用于长文本内容。

checkbox

复选框，适用于布尔值参数。

radio

单选框，从多个选项中选择一个值。

快速测试

快速测试功能允许用户通过预设的参数组合快速填充表单，提高测试效率。每个快速测试包含：

label: 显示名称
values: 参数值对象
description: 描述信息（可选）

使用示例

基本用法

<ApiTester 
  endpoints={[
    {
      name: '获取用户信息',
      method: 'GET',
      path: '/api/users/1',
      description: '根据用户ID获取用户详细信息'
    }
  ]} 
/>

带参数的API

<ApiTester 
  endpoints={[
    {
      name: '创建用户',
      method: 'POST',
      path: '/api/users',
      description: '创建新用户',
      params: [
        {
          name: 'username',
          placeholder: '请输入用户名',
          type: 'text',
          required: true
        },
        {
          name: 'email',
          placeholder: '请输入邮箱',
          type: 'text',
          required: true,
          validation: {
            pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
            message: '请输入有效的邮箱地址'
          }
        }
      ]
    }
  ]} 
/>

带快速测试的API

<ApiTester 
  endpoints={[
    {
      name: '用户登录',
      method: 'POST',
      path: '/api/auth/login',
      description: '用户登录认证',
      params: [
        {
          name: 'username',
          placeholder: '用户名',
          type: 'text',
          required: true
        },
        {
          name: 'password',
          placeholder: '密码',
          type: 'text',
          required: true
        }
      ],
      quickTests: [
        {
          label: '测试账号',
          values: {
            username: 'testuser',
            password: 'testpass'
          },
          description: '使用测试账号快速登录'
        }
      ]
    }
  ]} 
/>

带请求头配置

<ApiTester 
  endpoints={endpoints}
  showHeaders={true}
  defaultHeaders={{
    'Authorization': 'Bearer your-token-here',
    'X-API-Version': 'v1'
  }}
  showResponseTime={true}
  showRequestDetails={true}
/>

注意事项

跨域问题: 如果测试的API与当前页面不在同一域名下，可能会遇到跨域限制
HTTPS要求: 现代浏览器要求HTTPS页面只能请求HTTPS的API
参数验证: 建议为重要参数添加验证规则，提高测试的准确性
错误处理: 组件会自动处理网络错误和响应解析错误
安全性: 不要在快速测试中存储敏感信息，如真实密码

最佳实践

参数命名: 使用清晰的参数名称，便于理解和维护
验证规则: 为必填参数和格式敏感的参数添加适当的验证
快速测试: 预设常用的测试场景，提高开发效率
错误信息: 提供有意义的错误提示，帮助用户快速定位问题
响应处理: 根据API的实际响应格式调整显示方式