news 2026/5/17 7:48:47

【鸿蒙开发实战】HarmonyOS网络请求简化示例

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【鸿蒙开发实战】HarmonyOS网络请求简化示例

使用说明

  1. 创建文件

    • entry/src/main/ets/pages/目录下创建NetworkDemo.ets

    • 或者直接替换现有页面的代码

  2. 配置权限

    • module.json5中添加网络权限(如上所示)

  3. 运行应用

    • 点击"测试GET请求"按钮发送HTTP请求

    • 点击"检查网络状态"测试网络连通性

    • 点击"清除数据"清空显示内容

核心功能说明

  1. 网络请求:使用@ohos.net.http模块发送HTTP GET请求

  2. 状态管理:使用@State装饰器管理UI状态

  3. 异步处理:使用async/await处理异步网络请求

  4. 错误处理:完整的异常捕获和处理机制

  5. UI反馈:加载状态提示和结果显示

部分代码

// NetworkDemo.ets - HarmonyOS网络功能示例 import http from '@ohos.net.http'; import common from '@ohos.app.ability.common'; import { BusinessError } from '@ohos.base'; // 定义Http请求选项的接口 interface HttpRequestOptions { method: http.RequestMethod; header?: Record<string, string>; connectTimeout?: number; readTimeout?: number; extraData?: string | Object; } // 定义API响应数据结构 interface ApiResponse { userId: number; id: number; title: string; body: string; } // 定义错误信息数据结构 interface ErrorInfo { code?: number; message?: string; stack?: string; name?: string; } @Entry @Component struct NetworkDemo { @State message: string = '点击按钮测试网络连接'; @State responseData: string = ''; @State isConnected: boolean = false; // 获取Ability上下文 private context = getContext(this) as common.UIAbilityContext; build() { Column({ space: 20 }) { // 显示状态信息 Text(this.message) .fontSize(20) .fontColor(Color.Blue) .margin({ top: 30 }) // 显示连接状态 Text(this.isConnected ? '网络已连接' : '网络未连接') .fontSize(18) .fontColor(this.isConnected ? Color.Green : Color.Red) // 显示响应数据 Scroll() { Text(this.responseData) .fontSize(14) .textAlign(TextAlign.Start) .padding(10) } .height(200) .width('90%') .border({ width: 1, color: Color.Gray }) // 功能按钮区域 Column({ space: 15 }) { // 测试GET请求 Button('测试GET请求') .width('80%') .height(40) .onClick(() => { this.testGetRequest(); }) // 测试连接状态 Button('检查网络状态') .width('80%') .height(40) .onClick(() => { this.checkNetworkStatus(); }) // 清除数据 Button('清除数据') .width('80%') .height(40) .onClick(() => { this.clearData(); }) } .width('100%') .margin({ top: 20 }) // 进度指示器 LoadingProgress() .color(Color.Blue) .visibility(this.message.includes('请求中') ? Visibility.Visible : Visibility.Hidden) } .width('100%') .height('100%') .padding(20) .justifyContent(FlexAlign.Start) } // 测试GET请求 private async testGetRequest() { this.message = '正在发送请求...'; this.responseData = ''; try { // 创建HTTP请求 let httpRequest = http.createHttp(); // 设置请求参数 - 使用明确定义的类型 let url = 'https://jsonplaceholder.typicode.com/posts/1'; // 免费测试API let options: HttpRequestOptions = { method: http.RequestMethod.GET, header: { 'Content-Type': 'application/json' }, connectTimeout: 60000, readTimeout: 60000 }; // 发送请求 let response = await httpRequest.request(url, options); // 检查响应状态 if (response.responseCode === 200) { this.message = '请求成功!'; this.isConnected = true; // 安全地处理响应数据 try { const result = response.result as string; const parsedData: ApiResponse = JSON.parse(result) as ApiResponse; this.responseData = JSON.stringify(parsedData, null, 2); } catch (parseError) { this.responseData = response.result as string; } } else { this.message = `请求失败: ${response.responseCode}`; this.isConnected = false; this.responseData = response.result ? response.result as string : '无响应数据'; } // 释放资源 httpRequest.destroy(); } catch (error) { // 使用BusinessError类型处理错误 const businessError = error as BusinessError; this.message = `请求异常: ${businessError.message || '未知错误'}`; this.isConnected = false; // 安全地序列化错误对象 - 使用明确定义的类型 try { const errorObj: ErrorInfo = { code: businessError.code, message: businessError.message, stack: businessError.stack, name: 'BusinessError' }; this.responseData = JSON.stringify(errorObj, null, 2); } catch (stringifyError) { const stringifyErr = stringifyError as Error; this.responseData = `错误信息: ${businessError.message || '未知错误'}\n序列化错误: ${stringifyErr.message}`; } } } // 检查网络状态 private async checkNetworkStatus() { try { // 简单的连接性检查 let httpRequest = http.createHttp(); // 使用明确定义的类型 let options: HttpRequestOptions = { method: http.RequestMethod.GET, connectTimeout: 5000 }; await httpRequest.request('https://www.baidu.com', options); this.message = '网络连接正常'; this.isConnected = true; httpRequest.destroy(); } catch (error) { const businessError = error as BusinessError; this.message = `网络连接失败: ${businessError.message || '请检查网络设置'}`; this.isConnected = false; } } // 清除数据 private clearData() { this.responseData = ''; this.message = '数据已清除,点击按钮测试网络'; } }

入门鸿蒙开发又怕花冤枉钱?别错过!现在能免费系统学 -- 从 ArkTS 面向对象核心的类和对象、继承多态,到吃透鸿蒙开发关键技能,还能冲刺鸿蒙基础 +高级开发者证书,更惊喜的是考证成功还送好礼!快加入我的鸿蒙班,一起从入门到精通,班级链接:点击https://developer.huawei.com/consumer/cn/training/classDetail/b7365031334e4353a9a0fd6785bb0791?type=1?ha_source=hmosclass&ha_sourceId=89000248免费进入

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/14 18:55:06

3、软件设计模式与架构解析

软件设计模式与架构解析 1. 变更控制 在遵循严格文档原则的系统中,通常不允许频繁更改需求。过去,这常常导致“范围蔓延”现象,即项目从一个简单的设计开始,最终却变得极其复杂,严重超出预算和时间。例如,原本只是设计一个简单的电灯开关,最后却变成了一个运行的核电站…

作者头像 李华
网站建设 2026/5/17 7:48:02

ArduPilot飞控搭配BLHeli电调的航拍稳定性优化指南

让航拍稳如磐石&#xff1a;ArduPilot飞控与BLHeli电调的深度协同实战你有没有遇到过这种情况——精心架设云台、用上6K相机&#xff0c;飞行器一起飞&#xff0c;画面却总是“微微晃动”&#xff0c;像是镜头在“呼吸”&#xff1f;明明悬停很稳&#xff0c;回放视频时却总觉得…

作者头像 李华
网站建设 2026/5/11 8:14:48

现网都在用,但很多人不知道的网络服务和管理

一、DHCP 动态主机配置协议核心概念协议层级应用层协议核心作用客户端网卡设置为「动态获取IP」模式时&#xff0c;DHCP服务器会自动为其分配IP地址、子网掩码、网关、DNS等网络参数&#xff0c;实现客户端联网&#xff0c;减少手动配置工作量。典型场景办公网、校园网、家庭路…

作者头像 李华
网站建设 2026/5/11 8:14:48

基于Dify的语音助手前端+后端整合方案

基于 Dify 的语音助手前后端整合实践 在智能设备无处不在的今天&#xff0c;用户对“能听、会说、懂你”的语音助手期待越来越高。从智能家居到企业客服系统&#xff0c;语音交互正逐步成为主流入口。但构建一个真正可用的语音助手&#xff0c;并非只是接上语音识别&#xff08…

作者头像 李华
网站建设 2026/5/11 8:14:48

LVGL教程:RGB接口屏幕驱动调试技巧

搞定RGB屏不花、不闪、不撕裂&#xff1a;LVGL底层驱动调试实战指南你有没有遇到过这样的场景&#xff1f;LVGL界面写得漂亮&#xff0c;控件动画丝滑流畅&#xff0c;结果一烧进板子——屏幕要么全白、要么花得像抽象画&#xff0c;或者画面“上下错位”、刷新时疯狂闪烁。更糟…

作者头像 李华
网站建设 2026/5/14 8:48:13

4、用 Ruby 进行数据可视化与桌面报告生成

用 Ruby 进行数据可视化与桌面报告生成 1. 使用 Gruff 创建柱状图 在数据可视化中,柱状图是一种常用的展示方式。以下代码展示了如何使用 Gruff 库为数据库中的每个玩家创建柱状图报告: Player.find(:all).each do |player|bar_chart = Gruff::Bar.new(1024)bar_chart.le…

作者头像 李华