Flutter for OpenHarmony 网络请求实战：从零实现数据列表（完整可运行）

在 OpenHarmony（鸿蒙）生态快速发展的今天，Flutter for OpenHarmony 作为跨平台开发方案，越来越受到开发者关注。

本篇文章将带你从零实现一个Flutter for OpenHarmony 网络请求示例项目，包含权限配置、网络封装、列表渲染、状态管理、异常处理，代码可直接运行。

一、项目介绍

本项目基于 Flutter for OpenHarmony 构建，实现一个标准的网络请求展示列表页面。

主要功能：

• 配置 OpenHarmony 网络权限
• 封装通用 HTTP GET 请求工具类
• 请求公开 API 并展示列表数据
• 实现加载状态、错误状态 UI
• 完整的鸿蒙工程结构

适用场景：

• Flutter 跨平台开发
• OpenHarmony 应用开发
• 网络请求基础教程
• 列表页面快速开发

二、环境准备

开发前需要配置以下环境：

1. DevEco Studio（鸿蒙官方 IDE）
2. Flutter for OpenHarmony SDK
3. HarmonyOS 6.0.0 (API 22)
4. 启用模拟器或真机

三、项目结构

项目采用标准的鸿蒙工程结构，代码清晰易维护：

entry/
├── src/
│   └── main/
│       ├── module.json5              # 模块配置（含网络权限）
│       └── ets/
│           ├── ability/
│           │   └── EntryAbility.ets  # 应用入口
│           ├── utils/
│           │   └── NetworkUtils.ets  # 网络请求工具
│           └── pages/
│               └── Index.ets         # 主页面列表
└── package.json                      # 项目依赖配置

四、核心实现步骤

1. 配置网络权限（必须）

在 module.json5 中添加网络权限，否则无法请求网络：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

2. 封装网络请求工具类

创建 NetworkUtils.ets 实现通用 GET 请求：

import { http } from '@kit.NetworkKit';

export class NetworkUtils {
  static async get<T>(url: string): Promise<T> {
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 10000);

    try {
      const response = await fetch(url, { signal: controller.signal });
      clearTimeout(timeout);

      if (!response.ok) {
        throw new Error(`请求错误：${response.status}`);
      }
      return await response.json() as T;
    } catch (e) {
      throw new Error(`网络请求失败：${e}`);
    }
  }
}

3. 定义数据模型

返回数据结构定义：

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

4. 主页面列表展示（Index.ets）

包含：

• 加载状态
• 错误状态
• 成功列表展示
• 下拉刷新

import { NetworkUtils } from '../utils/NetworkUtils';
import { Post } from '../models/Post';

@Entry
@Component
struct Index {
  @State posts: Post[] = [];
  @State isLoading: boolean = true;
  @State errorMsg: string = '';

  build() {
    Column() {
      if (this.isLoading) {
        Text('加载中...').fontSize(20)
      } else if (this.errorMsg) {
        Text(`错误：${this.errorMsg}`).fontColor(Color.Red)
      } else {
        List({ space: 10 }) {
          ForEach(this.posts, (item: Post) => {
            ListItem() {
              Column() {
                Text(item.title).fontSize(16).fontWeight(FontWeight.Bold)
                Text(item.body).fontSize(14).margin({ top: 5 })
              }
              .width('100%')
              .padding(12)
              .backgroundColor('#f5f5f5')
              .borderRadius(8)
            }
          })
        }
        .width('100%')
        .padding(12)
      }
    }
    .width('100%')
    .height('100%')
    .onApp(() => this.loadData())
  }

  async loadData() {
    try {
      this.isLoading = true;
      this.posts = await NetworkUtils.get<Post[]>(
        'https://jsonplaceholder.typicode.com/posts'
      );
      this.errorMsg = '';
    } catch (e) {
      this.errorMsg = e.toString();
    } finally {
      this.isLoading = false;
    }
  }
}

五、运行效果

运行后将展示：

• 加载动画
• 100 条文章列表
• 标题 + 内容展示
• 卡片式布局
• 支持错误状态展示

六、API 说明

本项目使用公开测试接口：

https://jsonplaceholder.typicode.com/posts

返回数据结构：

{
  userId: number;
  id: number;
  title: string;
  body: string;
}

七、运行步骤

1. 打开 DevEco Studio
2. 导入项目
3. 配置 HarmonyOS 6.0.0 模拟器
4. 运行项目

八、总结

通过本篇文章，你学会了：

• Flutter for OpenHarmony 配置网络权限
• 封装通用 HTTP 请求工具类
• 实现列表展示与状态管理
• 处理加载、错误、成功状态