API测试是后端开发和接口调试的重要环节，一个好用的API测试工具能够大大提升开发效率。本文将详细介绍如何在Flutter for OpenHarmony应用中实现一个功能完整的API测试工具。

页面结构设计

API测试工具需要支持多种HTTP方法、请求参数配置和响应结果展示：

class ApiTesterPage extends StatefulWidget {
  @override
  _ApiTesterPageState createState() => _ApiTesterPageState();
}

class _ApiTesterPageState extends State<ApiTesterPage> {
  String selectedMethod = 'GET';
  final TextEditingController _urlController = TextEditingController();
  final TextEditingController _bodyController = TextEditingController();
  String response = '';

  final List<String> methods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'];

页面状态类包含HTTP方法选择、URL输入控制器、请求体控制器和响应结果字符串。支持常用的HTTP方法，满足大部分API测试需求。

HTTP方法选择

页面顶部提供HTTP方法选择和URL输入功能：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('API测试工具'),
      backgroundColor: Theme.of(context).primaryColor,
      foregroundColor: Colors.white,
    ),
    body: Padding(
      padding: EdgeInsets.all(16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              DropdownButton<String>(
                value: selectedMethod,
                items: methods.map((method) {
                  return DropdownMenuItem(
                    value: method,
                    child: Text(method),
                  );
                }).toList(),
                onChanged: (value) {
                  setState(() {
                    selectedMethod = value!;
                  });
                },
              ),

HTTP方法使用下拉选择框实现，用户可以方便地切换不同的请求方法。选择变化时会触发状态更新。

URL输入区域

HTTP方法选择器右侧是URL输入框：

SizedBox(width: 16.w),
Expanded(
  child: TextFormField(
    controller: _urlController,
    decoration: const InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'API URL',
      hintText: 'https://api.example.com/users',
    ),
  ),
),

URL输入框使用Expanded组件占据剩余空间，提供清晰的标签和提示文本。边框样式使用OutlineInputBorder提供现代化的外观。

请求体输入区域

对于非GET请求，显示请求体输入区域：

SizedBox(height: 16.h),
if (selectedMethod != 'GET') ...[
  Text(
    '请求体',
    style: TextStyle(
      fontSize: 16.sp,
      fontWeight: FontWeight.bold,
    ),
  ),
  SizedBox(height: 8.h),
  Container(
    height: 150.h,
    child: TextFormField(
      controller: _bodyController,
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        hintText: '{"key": "value"}',
      ),
      maxLines: null,
      expands: true,
    ),
  ),
  SizedBox(height: 16.h),
],

请求体输入区域只在非GET请求时显示，使用条件渲染优化界面。输入框支持多行文本，适合输入JSON格式的请求数据。

发送请求按钮

请求配置下方是发送请求的操作按钮：

ElevatedButton(
  onPressed: _sendRequest,
  child: const Text('发送请求'),
),
SizedBox(height: 16.h),

发送按钮使用ElevatedButton组件，提供清晰的操作反馈。按钮点击后会调用_sendRequest方法执行API请求。

响应结果展示

页面下方展示API响应结果：

Text(
  '响应结果',
  style: TextStyle(
    fontSize: 16.sp,
    fontWeight: FontWeight.bold,
  ),
),
SizedBox(height: 8.h),
Expanded(
  child: Container(
    width: double.infinity,
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.grey[100],
      borderRadius: BorderRadius.circular(8),
      border: Border.all(color: Colors.grey[300]!),
    ),
    child: SingleChildScrollView(
      child: Text(
        response.isEmpty ? '响应结果将显示在这里' : response,
        style: TextStyle(
          fontFamily: 'monospace',
          fontSize: 12.sp,
        ),
      ),
    ),
  ),
),

响应区域使用浅灰色背景和边框，内容使用等宽字体显示，确保JSON格式的可读性。区域可滚动，支持长响应内容的查看。

请求发送逻辑

发送请求的方法目前使用模拟数据：

void _sendRequest() {
  // TODO: 实现API请求功能
  setState(() {
    response = '模拟响应数据:\n{\n  "status": "success",\n  "data": {\n    "message": "Hello World"\n  }\n}';
  });
}

实际应用中，这里应该实现真正的HTTP请求逻辑，包括错误处理、超时设置等功能。

HTTP请求实现扩展

可以使用http包实现真正的API请求功能：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> _sendRequest() async {
  try {
    final url = Uri.parse(_urlController.text);
    http.Response response;
    
    Map<String, String> headers = {
      'Content-Type': 'application/json',
    };
    
    switch (selectedMethod) {
      case 'GET':
        response = await http.get(url, headers: headers);
        break;
      case 'POST':
        response = await http.post(
          url, 
          headers: headers, 
          body: _bodyController.text,
        );
        break;
      case 'PUT':
        response = await http.put(
          url, 
          headers: headers, 
          body: _bodyController.text,
        );
        break;
      case 'DELETE':
        response = await http.delete(url, headers: headers);
        break;
      case 'PATCH':
        response = await http.patch(
          url, 
          headers: headers, 
          body: _bodyController.text,
        );
        break;
      default:
        response = await http.get(url, headers: headers);
    }
    
    setState(() {
      this.response = _formatResponse(response);
    });
  } catch (e) {
    setState(() {
      response = '请求失败: $e';
    });
  }
}

真实的请求实现需要处理不同的HTTP方法，设置适当的请求头，并处理可能的异常情况。

响应格式化

响应结果需要格式化以提高可读性：

String _formatResponse(http.Response response) {
  StringBuffer buffer = StringBuffer();
  buffer.writeln('状态码: ${response.statusCode}');
  buffer.writeln('响应头:');
  response.headers.forEach((key, value) {
    buffer.writeln('  $key: $value');
  });
  buffer.writeln('\n响应体:');
  
  try {
    // 尝试格式化JSON
    var jsonData = jsonDecode(response.body);
    var encoder = JsonEncoder.withIndent('  ');
    buffer.writeln(encoder.convert(jsonData));
  } catch (e) {
    // 如果不是JSON，直接显示原始内容
    buffer.writeln(response.body);
  }
  
  return buffer.toString();
}

格式化功能会显示状态码、响应头和响应体，对于JSON响应会进行美化格式化。

请求历史功能

可以添加请求历史功能，保存常用的API请求：

class ApiRequest {
  final String method;
  final String url;
  final String body;
  final DateTime timestamp;
  
  ApiRequest({
    required this.method,
    required this.url,
    required this.body,
    required this.timestamp,
  });
}

List<ApiRequest> requestHistory = [];

void _saveToHistory() {
  requestHistory.add(ApiRequest(
    method: selectedMethod,
    url: _urlController.text,
    body: _bodyController.text,
    timestamp: DateTime.now(),
  ));
}

历史功能让用户可以快速重复之前的API请求，提高测试效率。

请求头配置

可以扩展请求头配置功能：

Map<String, String> customHeaders = {};

Widget _buildHeadersSection() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        '请求头',
        style: TextStyle(
          fontSize: 16.sp,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 8.h),
      ...customHeaders.entries.map((entry) {
        return Row(
          children: [
            Expanded(child: Text(entry.key)),
            Expanded(child: Text(entry.value)),
            IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  customHeaders.remove(entry.key);
                });
              },
            ),
          ],
        );
      }).toList(),
      ElevatedButton(
        onPressed: _addHeader,
        child: Text('添加请求头'),
      ),
    ],
  );
}

请求头配置让用户可以自定义HTTP头部信息，支持认证、内容类型等设置。

环境变量功能

可以添加环境变量功能，支持不同环境的API测试：

class Environment {
  final String name;
  final String baseUrl;
  final Map<String, String> variables;
  
  Environment({
    required this.name,
    required this.baseUrl,
    required this.variables,
  });
}

List<Environment> environments = [
  Environment(
    name: '开发环境',
    baseUrl: 'https://dev-api.example.com',
    variables: {'token': 'dev-token-123'},
  ),
  Environment(
    name: '生产环境',
    baseUrl: 'https://api.example.com',
    variables: {'token': 'prod-token-456'},
  ),
];

环境变量功能让用户可以在不同环境间快速切换，避免重复配置。

响应时间统计

可以添加响应时间统计功能：

DateTime? requestStartTime;
Duration? responseTime;

Future<void> _sendRequestWithTiming() async {
  requestStartTime = DateTime.now();
  
  try {
    await _sendRequest();
    responseTime = DateTime.now().difference(requestStartTime!);
    
    setState(() {
      response = '响应时间: ${responseTime!.inMilliseconds}ms\n\n$response';
    });
  } catch (e) {
    responseTime = DateTime.now().difference(requestStartTime!);
    setState(() {
      response = '请求失败 (${responseTime!.inMilliseconds}ms): $e';
    });
  }
}

响应时间统计帮助开发者了解API的性能表现。

批量测试功能

可以扩展批量测试功能，支持多个API的连续测试：

class TestSuite {
  final String name;
  final List<ApiRequest> requests;
  
  TestSuite({
    required this.name,
    required this.requests,
  });
}

Future<void> _runTestSuite(TestSuite suite) async {
  for (var request in suite.requests) {
    // 设置请求参数
    selectedMethod = request.method;
    _urlController.text = request.url;
    _bodyController.text = request.body;
    
    // 发送请求
    await _sendRequest();
    
    // 等待一段时间再发送下一个请求
    await Future.delayed(Duration(milliseconds: 500));
  }
}

批量测试功能适合API集成测试和回归测试场景。

总结

通过以上实现，我们创建了一个功能基础但完整的API测试工具，支持多种HTTP方法、请求体配置和响应展示。工具设计注重用户体验，通过清晰的界面布局和直观的操作流程，帮助开发者高效地进行API测试。在Flutter for OpenHarmony平台上，这样的开发工具能够显著提升后端开发和接口调试的效率。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net