欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net前言在移动应用开发中网络请求是非常常见的基础能力。很多页面看起来只是展示信息但背后都需要从接口获取数据例如天气信息、城市服务、商品列表、课程数据、校园通讯录等。本篇文章以“校园通讯录”为场景使用 OpenHarmony 三方库ohos/axios实现一个成员信息列表页面。项目运行后会自动请求远程接口获取成员数据并将姓名、用户名、邮箱和城市信息渲染成卡片列表。这篇文章的重点不是做复杂业务而是先把三方库接入、网络请求、数据解析和页面渲染这一整套流程跑通。通过这个项目可以比较清楚地理解 OpenHarmony 项目中三方库网络请求的基本开发方式。相比直接使用系统网络 APIaxios 的写法更接近前端常见开发方式适合后续继续封装统一请求、错误处理、拦截器和业务接口模块。一、项目效果最终运行效果如下页面主要包含以下内容顶部标题校园通讯录右上角刷新按钮成员信息卡片列表每个卡片展示成员编号、姓名、用户名、邮箱和城市支持重新请求数据页面支持上下滚动查看更多成员。这个页面可以作为校园通讯录、社团成员列表、班级信息表等项目的基础版本。二、项目目标本次实践主要实现以下目标在 OpenHarmony 项目中安装ohos/axios三方库配置网络访问权限封装 axios 网络请求工具类请求远程 JSON 数据定义成员信息数据结构实现加载中、加载失败、加载成功三种状态使用 ArkUI 的List和ForEach渲染成员卡片在 OpenHarmony 模拟器中完成运行验证。三、技术栈类型内容实战方向Flutter for OpenHarmony 三方库实战实现平台OpenHarmony开发语言ArkTS三方库ohos/axiosUI 框架ArkUI数据格式JSON测试接口JSONPlaceholder Users开发工具DevEco Studio运行环境OpenHarmony 模拟器四、为什么选择 axios在网络请求场景中axios 是一个比较常见的请求库。它支持 Promise 风格的异步请求代码结构比较清晰适合封装统一的请求模块。在 OpenHarmony 中可以使用适配后的ohos/axios三方库完成网络请求。相比每次都直接写系统 HTTP 请求axios 更适合后续扩展可以统一配置请求地址可以统一处理请求错误可以封装 GET、POST 等常用方法后续可以添加请求拦截器后续可以添加响应拦截器适合做成项目级请求工具类。本篇先完成最基础的 GET 请求和列表渲染。五、安装 axios 三方库在项目根目录打开终端执行以下命令ohpminstallohos/axios安装完成后可以在项目中看到相关依赖信息。通常可以检查以下位置oh-package.json5 oh-package-lock.json5 oh_modules如果oh_modules中出现 axios 相关内容说明三方库已经安装成功。六、配置网络权限应用需要访问网络接口因此必须配置网络权限。打开文件entry/src/main/module.json5在module节点下添加requestPermissions: [ { name: ohos.permission.INTERNET } ]完整示例{ module: { name: entry, type: entry, description: $string:module_desc, mainElement: EntryAbility, deviceTypes: [ phone ], deliveryWithInstall: true, installationFree: false, pages: $profile:main_pages, requestPermissions: [ { name: ohos.permission.INTERNET } ], abilities: [ { name: EntryAbility, srcEntry: ./ets/entryability/EntryAbility.ets, description: $string:EntryAbility_desc, icon: $media:icon, label: $string:EntryAbility_label, startWindowIcon: $media:icon, startWindowBackground: $color:start_window_background, exported: true, skills: [ { entities: [ entity.system.home ], actions: [ action.system.home ] } ] } ] } }这里最关键的是ohos.permission.INTERNET如果没有这个权限网络请求可能无法正常执行。七、项目结构本次主要修改以下文件entry └── src └── main ├── ets │ ├── pages │ │ └── Index.ets │ └── utils │ └── AxiosUtils.ets └── module.json5文件说明文件作用module.json5配置网络权限AxiosUtils.ets封装 axios 网络请求Index.ets页面展示、状态管理和列表渲染八、封装 axios 请求工具类在entry/src/main/ets/utils目录下新建文件AxiosUtils.ets完整代码如下importaxios,{AxiosResponse}fromohos/axios;exportclassAxiosUtils{staticasyncgetT(url:string):PromiseT{try{constresponse:AxiosResponseawaitaxios.get(url);if(response.status200){returnresponse.dataasT;}else{thrownewError(请求失败状态码${response.status});}}catch(err){console.error(axios 请求错误${JSON.stringify(err)});thrownewError(网络请求失败请检查网络连接或接口地址);}}}这段代码主要完成以下功能导入ohos/axios使用axios.get()发起 GET 请求判断响应状态码是否为 200请求成功后返回response.data请求失败时抛出统一错误信息将请求逻辑从页面中拆出来方便后续复用。这样页面中就不需要关心 axios 的具体请求过程只需要调用AxiosUtils.getUserInfo[](url)即可获取数据。九、定义成员数据结构本次使用测试接口https://jsonplaceholder.typicode.com/users接口返回的是一个用户数组每个用户对象包含编号、姓名、用户名、邮箱、地址等字段。在Index.ets中定义数据结构interfaceAddressInfo{city:string;}interfaceUserInfo{id:number;name:string;username:string;email:string;address:AddressInfo;}字段说明如下字段含义id成员编号name成员姓名username用户名email邮箱address.city所在城市定义接口类型后页面中使用字段会更加清晰也能减少后续维护时的混乱。十、页面状态设计一个完整的网络请求页面不能只处理“请求成功”这一种情况。实际开发中至少需要考虑三种状态状态页面表现加载中显示加载动画加载失败显示错误提示和重新加载按钮加载成功显示成员列表因此在页面中定义三个状态变量Stateusers:UserInfo[][];StateisLoading:booleanfalse;StateerrorMessage:string;含义如下users保存接口返回的成员数据isLoading控制加载动画显示errorMessage保存错误提示信息。这种写法可以避免页面请求失败时直接空白提高交互体验。十一、Index.ets 完整代码打开文件entry/src/main/ets/pages/Index.ets完整代码如下import{AxiosUtils}from../utils/AxiosUtils;interfaceAddressInfo{city:string;}interfaceUserInfo{id:number;name:string;username:string;email:string;address:AddressInfo;}EntryComponentstruct Index{Stateusers:UserInfo[][];StateisLoading:booleanfalse;StateerrorMessage:string;aboutToAppear():void{this.loadUsers();}asyncloadUsers():Promisevoid{this.isLoadingtrue;this.errorMessage;try{constdataawaitAxiosUtils.getUserInfo[](https://jsonplaceholder.typicode.com/users);this.usersdata;}catch(err){this.errorMessage成员数据加载失败请检查网络连接;console.error(加载成员数据失败${JSON.stringify(err)});}finally{this.isLoadingfalse;}}build(){Column(){Row(){Text(校园通讯录).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#182431)Blank()Button(刷新).fontSize(14).height(36).onClick((){this.loadUsers();})}.width(100%).padding({left:16,right:16,top:24,bottom:12})if(this.isLoading){Column(){LoadingProgress().width(50).height(50)Text(正在加载成员数据...).fontSize(16).fontColor(#666666).margin({top:12})}.width(100%).layoutWeight(1).justifyContent(FlexAlign.Center)}elseif(this.errorMessage!){Column(){Text(this.errorMessage).fontSize(18).fontColor(#E84026).margin({bottom:18})Button(重新加载).fontSize(16).onClick((){this.loadUsers();})}.width(100%).layoutWeight(1).justifyContent(FlexAlign.Center)}else{List({space:12}){ForEach(this.users,(item:UserInfo){ListItem(){Row(){Text(item.id.toString()).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).textAlign(TextAlign.Center).width(46).height(46).backgroundColor(#0A59F7).borderRadius(23)Column(){Text(item.name).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#182431).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})Text(用户名${item.username}).fontSize(14).fontColor(#666666).margin({top:6})Text(邮箱${item.email}).fontSize(14).fontColor(#666666).margin({top:4})Text(城市${item.address.city}).fontSize(14).fontColor(#666666).margin({top:4})}.layoutWeight(1).margin({left:14}).alignItems(HorizontalAlign.Start)}.width(100%).padding(16).backgroundColor(#F7F8FA).borderRadius(16)}},(item:UserInfo)item.id.toString())}.width(100%).layoutWeight(1).padding({left:16,right:16,bottom:16})}}.width(100%).height(100%).backgroundColor(#FFFFFF)}}十二、页面实现说明页面整体使用Column作为根布局顶部使用Row实现标题和刷新按钮。Row(){Text(校园通讯录)Blank()Button(刷新)}点击刷新按钮后会重新调用this.loadUsers();列表区域使用List和ForEach渲染成员数据List({space:12}){ForEach(this.users,(item:UserInfo){ListItem(){// 成员卡片内容}},(item:UserInfo)item.id.toString())}每个成员卡片分为两部分左侧蓝色圆形编号右侧成员姓名、用户名、邮箱、城市。这样设计后页面结构比较清楚也更适合截图展示。十三、运行效果完成代码后点击 DevEco Studio 中的运行按钮将应用运行到 OpenHarmony 模拟器中。运行成功后页面顶部显示校园通讯录下方展示成员卡片例如1 Leanne Graham 用户名Bret 邮箱Sincereapril.biz 城市Gwenborough右上角的“刷新”按钮可以重新请求数据。十四、开发中遇到的问题1. ohpm install 安装失败如果执行ohpminstallohos/axios失败可以先检查终端是否在项目根目录下或者检查 DevEco Studio 的 ohpm 环境是否正常。也可以查看项目中是否已经生成oh_modules oh-package-lock.json52. 找不到 ohos/axios如果代码中出现类似找不到模块的问题可以检查oh-package.json5中是否已经出现 axios 依赖。还可以重新执行ohpminstallohos/axios3. 网络请求失败如果页面显示“成员数据加载失败”需要检查以下内容模拟器是否能正常联网接口地址是否写错module.json5是否配置ohos.permission.INTERNETaxios 是否安装成功控制台是否有具体错误信息。4. 页面卡片显示拥挤如果列表内容太贴边可以通过padding、margin和borderRadius调整样式。例如本项目中使用.padding(16).backgroundColor(#F7F8FA).borderRadius(16)让每个成员卡片更像真实应用中的信息块。十五、总结本篇完成了一个基于ohos/axios的校园通讯录成员列表页面。项目通过 axios 请求远程成员数据并使用 ArkUI 将数据渲染成卡片式列表。通过本次实践我主要完成了以下内容安装并使用ohos/axios三方库配置 OpenHarmony 网络权限封装 axios 请求工具类请求远程 JSON 数据定义成员信息数据结构实现加载中、加载失败和加载成功三种状态使用List和ForEach渲染成员卡片在模拟器中完成运行验证。虽然这个项目只是校园通讯录的基础版本但它已经具备真实应用开发中常见的数据请求和列表展示能力。后续可以继续扩展为一个更完整的校园通讯录应用例如成员搜索与筛选成员详情页跳转收藏常用联系人本地缓存通讯录数据下拉刷新与分页加载接入真实校园接口。整体来看axios 三方库让网络请求代码更加简洁也方便后续进行统一封装。通过这个项目可以更清楚地理解 OpenHarmony 中三方库接入、网络请求、状态管理和列表渲染之间的关系。