引言在上一节课中我们学习了 HTTP 协议的基础理论。本节课将从理论走向实践学习如何在 HarmonyOS 应用中使用 Network Kit 的 HTTP 模块发起网络请求。通过开发一个图片列表应用掌握 HTTP 请求的完整流程包括发起 GET 请求、接收解析服务端数据、结合 UI 组件渲染页面等核心技能。核心内容HTTP 请求-响应基础流程回顾完整的 HTTP 请求-响应流程如下客户端 → 建立连接 → 发送请求含 URL、请求方法、请求头→ 服务器处理请求 → 发送响应 → 客户端处理响应 → 关闭连接作为应用开发者核心关注发送请求和处理响应两个步骤。HarmonyOS Network Kit 工作原理核心定位Network Kit 是 HarmonyOS 提供的网络开发工具包HTTP 模块封装了底层通信细节为开发者提供简洁高效的接口让开发者可以专注业务逻辑开发。工作角色可将 Network Kit 看作双向翻译官请求阶段接收应用传入的请求参数URL、配置 options打包封装为标准 HTTP 请求发送给服务器。响应阶段接收服务器返回的原始响应数据解析为 ArkTS 对象返回给应用。交互流程应用 → Network Kit → 服务器服务器返回原始数据 → Network Kit 处理解析 → 返回 ArkTS 对象给应用。核心接口说明创建请求接口createHttp()负责创建HttpRequest请求任务对象是所有 HTTP 操作的基础。let httpRequest http.createHttp();生成的HttpRequest对象支持以下核心方法方法说明request()发起网络请求destroy()销毁请求任务释放资源on()/off()完成事件的订阅与取消一个HttpRequest对象对应一次独立的 HTTP 请求任务全流程发起请求、解析响应、错误处理、销毁都基于该对象完成。发起请求接口HttpRequest.request()方法定义request(url: string, options?: HttpRequestOptions): PromiseHttpResponse;参数说明参数说明url指定请求的服务端资源地址对应 HTTP 请求中的 host 和资源路径options.method指定请求方法GET/POST 等options.header自定义请求头配置后会直接转化为 HTTP 请求的请求头字段GET 请求示例let promise httpRequest.request( https://developer.huawei.com/config/cn/head.json, { method: http.RequestMethod.GET, usingCache: false, header: { Accept: application/json }, // ... }, );响应对象HttpResponse核心字段字段说明responseCode对应 HTTP 响应的状态码200 表示请求成功header响应头对象包含Content-Type等字段必须关注Content-Type响应头字段它指明了响应数据的类型指导开发者如何解析数据。例如application/json说明返回的是 JSON 字符串需要用 JSON 解析方法处理。响应处理示例).then((data: http.HttpResponse) { if (data.responseCode http.ResponseCode.OK) { const contentType: string data.header[content-type]; // 根据 Content-Type 决定解析方式 } });HTTP 请求开发实践图片列表应用应用功能目标实现一个可从网络获取图片地址数据渲染展示图片列表的应用初始状态页面显示暂无数据。点击请求按钮发起 GET 请求获取图片地址 JSON 数据。解析数据后展示图片地址列表点击渲染按钮跳转后加载渲染所有图片。完整开发流程开发准备 → 创建HTTP请求任务 → 发起HTTP请求 → 解析响应 → 错误处理 → 渲染页面 → 销毁HTTP请求步骤 1开发准备——配置权限与导入模块HarmonyOS 中访问互联网属于敏感操作必须先申请权限。权限配置在module.json5中声明互联网权限。// module.json5 { module: { requestPermissions: [ { name: ohos.permission.INTERNET, reason: request images from network } ] } }导入 HTTP 模块import { http } from kit.NetworkKit;本接口从 API version 6 开始支持。步骤 2创建 HTTP 请求任务调用createHttp()创建请求对象后续所有操作都基于该对象。httpGetData(): void { let httpRequest http.createHttp(); }步骤 3发起 GET 请求传入目标数据 URL指定请求方法为 GET。const IMAGE_URL: string https://raw.gitcode.com/HarmonyOS_Codelabs/ObtainNetworkData/raw/master/Resources/rawfile/response.json; httpGetData(): void { let httpRequest http.createHttp(); httpRequest.request(IMAGE_URL, { method: http.RequestMethod.GET }); }本次请求返回的是包含图片地址的 JSON 数据而非图片本身后续需要解析该 JSON 获取图片地址。步骤 4解析 JSON 响应解析原理服务器返回的原始数据是 JSON 格式字符串需要通过反序列化转换为应用可直接使用的 ArkTS 对象才能绑定到 UI 组件渲染。解析步骤从响应中获取原始 JSON 字符串调用 JSON 解析方法转换为自定义格式的对象数组每个对象对应一张图片的信息id、url。.then((data: http.HttpResponse) { if (data.responseCode http.ResponseCode.OK) { // 获取原始 JSON 字符串 let jsonString data.result as string; // 反序列化为自定义类型数组 let imageList: ImageItem[] JSON.parse(jsonString); this.imageData imageList; } })步骤 5错误处理网络请求必须做异常处理否则会导致应用无响应甚至崩溃严重影响用户体验。常见网络错误设备未联网、服务器地址错误、服务器不可达、请求超时等。处理方法在 Promise 后添加catch代码块捕获异常在捕获异常后更新页面状态向用户展示错误提示。.catch((error: Error) { console.error(Network request failed: error.message); this.errorMessage 网络请求失败请检查网络连接; })步骤 6渲染页面使用列表组件循环遍历解析完成的图片数组在每个项中使用Image组件传入图片 URL 完成图片加载渲染。Builder buildImageList() { List() { ForEach(this.imageData, (item: ImageItem) { ListItem() { Image(item.url) .width(100%) .height(200) .objectFit(ImageFit.Cover) } }) } }步骤 7销毁请求任务请求完成后必须调用destroy()方法主动销毁HttpRequest对象释放系统资源避免不必要的资源消耗。httpRequest.destroy();总结本节课完成了从网络获取图片列表数据并渲染展示的完整开发HTTP 请求-响应流程开发者作为客户端角色重点掌握发送请求和处理响应两个步骤。Network Kit 核心定位HarmonyOS 的网络开发工具包HTTP 模块封装底层通信细节相当于双向翻译官负责请求封装和响应解析。核心接口createHttp()创建HttpRequest请求任务对象。request(url, options)发起请求返回PromiseHttpResponse。HttpResponse包含responseCode状态码和header含Content-Type。完整开发流程开发准备权限配置 导入模块→ 创建请求任务 → 发起 GET 请求 → 解析 JSON 响应 → 错误处理 → 渲染页面 → 销毁请求任务。关键注意事项必须申请ohos.permission.INTERNET权限。必须根据Content-Type正确解析响应数据。必须做异常处理避免应用崩溃。请求完成后必须调用destroy()释放资源。