【鸿蒙开发实战】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免费进入