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

• 个人首页： VON

• 鸿蒙系列专栏： 鸿蒙开发小型案例总结

• 综合案例 ：鸿蒙综合案例开发

• 鸿蒙6.0：从0开始的开源鸿蒙6.0.0

• 鸿蒙5.0：鸿蒙5.0零基础入门到项目实战

• Electron适配开源鸿蒙专栏：Electron for OpenHarmony

• 本文章所属专栏：Flutter for OpenHarmony

Flutter 网络请求实战

• [从零实现一个完整的 API 测试页面](#从零实现一个完整的 API 测试页面)
• • [🎯 目标效果](#🎯 目标效果)
  • [🛠️ 第一步：添加依赖](#🛠️ 第一步：添加依赖)
  • [📄 第二步：编写核心代码](#📄 第二步：编写核心代码)
  • [🔍 代码详解](#🔍 代码详解)
  • • [1. `http.get()` 发起请求](#1. http.get() 发起请求)
    • [2. 解析 JSON 数据](#2. 解析 JSON 数据)
    • [3. UI 状态管理](#3. UI 状态管理)
    • [4. 错误处理](#4. 错误处理)
  • [✅ 运行测试](#✅ 运行测试)
  • [🚀 进阶建议](#🚀 进阶建议)
  • [📌 总结](#📌 总结)

从零实现一个完整的 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: 无论成功与否，关闭加载状态

---

✅ 运行测试

1. 打开dev，进入项目根目录

2. 运行项目：

3. 启动应用后，点击 "获取文章" 按钮

4. 观察是否成功显示文章内容

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

标题: 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 包

---

📌 总结

通过这个简单的例子，你已经掌握了 Flutter 中最基础也最重要的技能之一：网络请求与数据展示。

关键点回顾：

• 使用 http 包发起请求
• 用 jsonDecode() 解析返回数据
• 用 FutureBuilder 或 setState 管理异步状态
• 做好错误处理和用户反馈

🎯 这个页面可以作为你所有 Flutter 项目的"网络测试模板"，只需替换 URL 和解析逻辑即可复用。