Flutter for OpenHarmony前置知识《Flutter 网络请求实战：从零实现一个完整的 API 测试页面》

在 Flutter 开发中，网络请求是连接应用与后端服务的关键环节。本文将通过一个**真实可运行的示例代码**，带你一步步实现一个完整的网络请求测试页面

●VON

413人浏览 · 2025-12-02 13:26:20

●VON · 2025-12-02 13:26:20 发布

在这里插入图片描述

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
Electron适配开源鸿蒙专栏：Electron for OpenHarmony
本文章所属专栏：Flutter for OpenHarmony

Flutter 网络请求实战

从零实现一个完整的 API 测试页面

在这里插入图片描述

从零实现一个完整的 API 测试页面

在 Flutter 开发中，网络请求是连接应用与后端服务的关键环节。本文将通过一个真实可运行的示例代码，带你一步步实现一个完整的网络请求测试页面，涵盖：

✅ 添加 HTTP 依赖
✅ 发起 GET 请求
✅ 解析 JSON 数据
✅ 展示加载状态和错误处理
✅ 实际运行效果展示

最终你将得到一个功能完整、用户体验良好的网络请求测试界面。

🎯 目标效果

以下是本教程实现后的实际运行效果（截图）：

在这里插入图片描述

点击“获取文章”按钮后，会从 JSONPlaceholder 获取一篇模拟文章，并显示标题和内容。

🛠️ 第一步：添加依赖

在 pubspec.yaml 文件中添加 http 包：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0

然后运行：

flutter pub get

在这里插入图片描述

💡 http 是 Flutter 官方推荐的基础网络库，轻量且易于使用。

📄 第二步：编写核心代码

将以下代码保存到 lib/main.dart 中：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '网络请求测试',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const NetworkTestPage(),
    );
  }
}

class NetworkTestPage extends StatefulWidget {
  const NetworkTestPage({super.key});

  @override
  State<NetworkTestPage> createState() => _NetworkTestPageState();
}

class _NetworkTestPageState extends State<NetworkTestPage> {
  String _responseText = '点击按钮发起请求';
  bool _isLoading = false;

  Future<void> _fetchData() async {
    setState(() {
      _isLoading = true;
      _responseText = '加载中...';
    });

    try {
      final response = await http.get(
        Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
      );

      if (response.statusCode == 200) {
        final data = jsonDecode(response.body) as Map<String, dynamic>;
        setState(() {
          _responseText = '标题: ${data['title']}\n\n内容: ${data['body']}';
        });
      } else {
        setState(() {
          _responseText = '请求失败，状态码: ${response.statusCode}';
        });
      }
    } catch (e) {
      setState(() {
        _responseText = '网络错误: $e';
      });
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网络请求测试')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: _fetchData,
              child: const Text('获取文章'),
            ),
            const SizedBox(height: 20),
            if (_isLoading)
              const CircularProgressIndicator()
            else
              Expanded(
                child: SingleChildScrollView(
                  child: Text(_responseText),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

🔍 代码详解

1. `http.get()` 发起请求

final response = await http.get(
  Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
);

使用 Uri.parse() 构造 URL
await 等待异步响应
返回值为 Response 对象，包含状态码和 body

2. 解析 JSON 数据

final data = jsonDecode(response.body) as Map<String, dynamic>;

jsonDecode() 将字符串转为 Dart 对象
类型断言为 Map<String, dynamic>，便于访问字段

3. UI 状态管理

_isLoading 控制加载动画
_responseText 显示结果或错误信息
使用 setState() 更新 UI

4. 错误处理

try { ... } catch (e) { ... } finally { ... }

try: 正常执行请求
catch: 捕获网络异常（如无网、超时）
finally: 无论成功与否，关闭加载状态

✅ 运行测试

打开dev，进入项目根目录
运行项目：
启动应用后，点击 “获取文章” 按钮
观察是否成功显示文章内容

✅ 成功标志：显示如下内容：

标题: sunt aut facere repellat provident occaecati excepturi optio reprehenderit

内容: quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto

在这里插入图片描述

🚀 进阶建议

功能	推荐方案
支持 POST / PUT	使用 `http.post()` 或 `dio`
添加 Token 认证	在 headers 中加入 `Authorization`
重试机制	使用 `retry` 库或手动循环
缓存数据	结合 `shared_preferences` 或 `hive`
多语言支持	使用 `intl` 包