🌐 鸿蒙网络请求实战｜用 @ohos/axios 打造一个可交互的用户列表（附完整代码+避坑指南）

HarmonyOS 开发进阶 · 一次搞懂三方库 + 网络权限 + 响应式列表

大家好，我是 程序员小V 👨‍💻在鸿蒙开发中，如何优雅地发起网络请求并渲染数据？虽然系统提供了 @ohos.net.http，但 API 较底层。今天我们就引入社区广泛使用的 @ohos/axios，手把手实现一个支持加载、展示、右滑删除的用户列表！

📦 第一步：安装三方库 @ohos/axios

@ohos/axios 是专为 OpenHarmony / HarmonyOS 适配的 Axios 版本，支持熟悉的 async/await 和 TypeScript 类型推断。

安装流程：

1. 1. 打开 OHPM 中心仓；
2. 2. 搜索 @ohos/axios；
3. 3. 复制安装命令，在 DevEco Studio 的 Terminal 中执行：

ohpm install @ohos/axios

✅ 验证成功：

• • oh-package.json5 中出现依赖；
• • node_modules/@ohos/axios 目录存在。

🔒 第二步：配置网络权限

鸿蒙应用默认禁止网络访问！必须在 module.json5 中显式声明权限：

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

⚠️ 常见陷阱：若忘记此步骤，axios 会报 Network Error，且错误信息不明确！

🧪 第三步：测试接口准备

我们使用经典的 JSONPlaceholder 模拟 API：

• • 接口地址：https://jsonplaceholder.typicode.com/users
• • 返回数据：10 条用户信息，包含姓名、邮箱、地址、公司等字段。

官方文档提供了泛型、拦截器等高级用法说明：

🧱 第四步：定义 TypeScript 用户模型

为确保类型安全与IDE 智能提示，我们基于返回结构定义完整的类体系：

// src/main/ets/common/UserDemo.tsexport class User {  id: number;  name: string;  username: string;  email: string;  address: Address;  phone: string;  website: string;  company: Company;  // ... 构造函数略}class Address { /* ... */ }class Geo { /* ... */ }class Company { /* ... */ }

💡 工程规范：此类文件应存放在 common/ 目录，命名为 UserDemo.ts，便于跨组件复用。

🚀 第五步：基础请求测试

先写一个最简版本，验证网络是否通畅：

import axios, { AxiosResponse } from '@ohos/axios';import { User } from '../common/UserDemo'@Entry@Componentstruct Index {  url: string = 'https://jsonplaceholder.typicode.com/users'  async getUser() {    try {      const response: AxiosResponse = await axios.get(this.url);      console.log('✅ 请求成功:', JSON.stringify(response.data));    } catch (error) {      console.error('❌ 请求失败:', JSON.stringify(error));    }  }  build() {    Column() {      Button('axios测试').onClick(() => this.getUser())    }  }}

🔍 注意：此时数据未绑定 UI，仅用于控制台验证。

🎯 第六步：构建完整交互版用户列表

现在，我们让数据驱动 UI，并支持右滑删除！

最终效果如下动图所示：

🧩 核心代码深度解析

1. 组件状态定义

@State users: User[] = []

• • @State 是 ArkTS 的响应式核心；
• • 数组变化 → 自动触发 UI 重绘。

2. 获取并绑定数据

async getUser() {  try {    const response = await axios.get<User[]>(this.url);    this.users = response.data; // ✅ 关键：赋值触发更新  } catch (error) {    console.error('网络请求失败', error);  }}

✅ 修正泛型：应为 get<User[]>，因为返回的是数组。

3. 右滑删除功能

@BuilderdelBuilder(index: number) {  Row() {    Button('🚮').onClick(() => {      this.users.splice(index, 1); // 修改 @State 数组    })  }}

• • @Builder 封装可复用 UI 片段；
• • splice 原地删除，自动刷新列表。

4. 页面 UI 构建

build() {  Column() {    Button('获取数据').onClick(() => this.getUser())    List() {      ForEach(this.users, (item: User, index: number) => {        ListItem() {          Column() {            Text('姓名：' + item.name)            Text('邮箱：' + item.email)          }          .margin(10)        }        .swipeAction({          end: this.delBuilder(index) // 右滑显示删除        })      })    }    .width('100%')    .height('100%')  }}

• • List + ForEach：高性能滚动列表；
• • .swipeAction({ end: ... })：原生右滑手势支持。

🔄 代码运行全流程

1. 1. 初始状态：users = []，列表为空；
2. 2. 点击按钮：发起 GET 请求；
3. 3. 请求成功：users = response.data，列表渲染 10 条用户；
4. 4. 右滑某项：右侧出现垃圾桶按钮；
5. 5. 点击删除：splice(index, 1) 移除数据，UI 实时更新；
6. 6. 请求失败：控制台报错，UI 不变。

💡 工程化优化建议

🔒 安全提醒：生产环境切勿在前端暴露真实 API 地址！应通过后端代理或配置中心管理。

🧭 技术栈总结

💎 总结

通过本案例，你不仅学会了：

• • 如何安装和使用三方库；
• • 如何配置网络权限；
• • 如何发起网络请求并处理响应；

更掌握了鸿蒙开发的三大核心能力：

状态管理 + 列表渲染 + 手势交互

这正是构建复杂业务页面的基石！

作者：程序员小V（VON）专注 HarmonyOS / Flutter / OpenHarmony 开发用代码构建生态，用分享照亮他人

👉 关注我的 CSDN 主页，获取更多鸿蒙实战教程：🔗 https://blog.csdn.net/2302_80329073