ArkTS 网络请求全流程：从 Http 到数据渲染 HarmonyOS 5.0.0-CSDN博客

本文链接：https://blog.csdn.net/weixin_43815680/article/details/147923186

🌐 ArkTS 网络请求全流程：从 Http 到数据渲染

鸿蒙系统开发中，很多场景都离不开网络请求：

加载商品列表
获取天气数据
提交登录信息

但你是否遇到过这些问题？

不知道用哪个模块发请求？
请求写进页面逻辑太乱？
无法优雅地处理 Loading、失败等状态？

本文将带你系统掌握 ArkTS 的网络请求能力 —— 从封装 Http，到列表渲染、异常处理全流程演练。

✅ 用哪个模块发请求？

ArkTS 提供官方网络模块：

import http from '@ohos.net.http'

封装简单，支持 GET/POST、Header 设置、JSON 自动转换等。

🎯 本文目标

我们将实现一个“用户列表”页面，包含以下能力：

页面加载时请求接口数据；
显示 Loading 状态；
成功渲染用户卡片列表；
请求失败显示错误提示。

📦 Step1：封装请求模块

// api/user.ts
import http from '@ohos.net.http'

export async function fetchUsers(): Promise<any[]> {
  const httpRequest = http.createHttp()
  const response = await httpRequest.request(
    'https://jsonplaceholder.typicode.com/users',
    {
      method: http.RequestMethod.GET,
      header: {
        'Content-Type': 'application/json'
      },
      readTimeout: 6000
    }
  )

  if (response.responseCode !== 200) {
    throw new Error('网络请求失败')
  }

  return JSON.parse(response.result as string)
}

说明：

创建请求实例 createHttp()
调用 .request() 方法发起请求
自动解析 JSON 数据返回

📦 Step2：页面逻辑 UserList.ets

import { fetchUsers } from '../api/user'

@Entry
@Component
struct UserList {
  @State users: any[] = []
  @State loading: boolean = true
  @State error: string = ''

  async aboutToAppear() {
    try {
      this.loading = true
      this.users = await fetchUsers()
    } catch (e) {
      this.error = (e as Error).message
    } finally {
      this.loading = false
    }
  }

  build() {
    Column() {
      If(this.loading, () => {
        Text('加载中...').fontSize(20).fontColor(Color.Grey)
      }).elseIf(this.error !== '', () => {
        Text(`错误：${this.error}`).fontColor(Color.Red)
      }).else(() => {
        List() {
          ForEach(this.users, (user) => {
            ListItem() {
              Column() {
                Text(`姓名：${user.name}`).fontSize(18)
                Text(`邮箱：${user.email}`).fontSize(14).fontColor(Color.Grey)
              }
              .padding(10)
            }
          })
        }
      })
    }
    .padding(20)
  }
}

📌 核心解读

`aboutToAppear()`

鸿蒙页面的生命周期钩子，页面显示时触发，可用于数据初始化加载。

多状态处理建议

使用 3 个状态变量：

loading 控制加载态；
error 控制异常提示；
users 渲染列表内容。

使页面渲染逻辑更清晰、鲁棒性更强。

✅ 高级技巧：封装请求 hooks

你可以提取一个 useRequest 工具模块：

export function useRequest<T>(fn: () => Promise<T>) {
  let data: T | null = null
  let loading = true
  let error = ''

  async function run() {
    try {
      loading = true
      data = await fn()
    } catch (e) {
      error = (e as Error).message
    } finally {
      loading = false
    }
  }

  return { data, loading, error, run }
}

在页面中使用：

const { data, loading, error, run } = useRequest(fetchUsers)

实现请求逻辑解耦。

🧩 小结

本文你学到了：

如何用 @ohos.net.http 发起 GET 请求；
如何封装接口模块、处理 loading 和 error；
如何用生命周期钩子自动加载数据；
如何渲染动态列表。

掌握这些，就能轻松应对 90% 的鸿蒙数据页面开发。

📘 下一篇预告

《鸿蒙适配指南：多设备、多尺寸界面自适应实践》