引言

在上一节课中，我们学习了 HTTP 协议的基础理论。本节课将从理论走向实践，学习如何在 HarmonyOS 应用中使用 Network Kit 的 HTTP 模块发起网络请求。通过开发一个图片列表应用，掌握 HTTP 请求的完整流程，包括发起 GET 请求、接收解析服务端数据、结合 UI 组件渲染页面等核心技能。

核心内容

HTTP 请求-响应基础流程回顾

完整的 HTTP 请求-响应流程如下：

客户端 → 建立连接 → 发送请求（含 URL、请求方法、请求头）→ 服务器处理请求 → 发送响应 → 客户端处理响应 → 关闭连接

作为应用开发者，核心关注发送请求和处理响应两个步骤。

HarmonyOS Network Kit 工作原理

核心定位：Network Kit 是 HarmonyOS 提供的网络开发工具包，HTTP 模块封装了底层通信细节，为开发者提供简洁高效的接口，让开发者可以专注业务逻辑开发。

工作角色：可将 Network Kit 看作"双向翻译官"：

1. 请求阶段：接收应用传入的请求参数（URL、配置 options），打包封装为标准 HTTP 请求发送给服务器。

2. 响应阶段：接收服务器返回的原始响应数据，解析为 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): Promise<HttpResponse>;

参数说明：

参数	说明
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 请求开发实践（图片列表应用）

应用功能目标

实现一个可从网络获取图片地址数据，渲染展示图片列表的应用：

1. 初始状态：页面显示"暂无数据"。

2. 点击请求按钮：发起 GET 请求获取图片地址 JSON 数据。

3. 解析数据后展示图片地址列表，点击渲染按钮跳转后加载渲染所有图片。

完整开发流程

开发准备 → 创建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();

总结

本节课完成了从网络获取图片列表数据并渲染展示的完整开发：

1. HTTP 请求-响应流程：开发者作为客户端角色，重点掌握发送请求和处理响应两个步骤。

2. Network Kit 核心定位：HarmonyOS 的网络开发工具包，HTTP 模块封装底层通信细节，相当于"双向翻译官"，负责请求封装和响应解析。

3. 核心接口：

   • createHttp()：创建 HttpRequest 请求任务对象。

   • request(url, options)：发起请求，返回 Promise<HttpResponse>。

   • HttpResponse：包含 responseCode（状态码）和 header（含 Content-Type）。

4. 完整开发流程：开发准备（权限配置 + 导入模块）→ 创建请求任务 → 发起 GET 请求 → 解析 JSON 响应 → 错误处理 → 渲染页面 → 销毁请求任务。

5. 关键注意事项：

   • 必须申请 ohos.permission.INTERNET 权限。

   • 必须根据 Content-Type 正确解析响应数据。

   • 必须做异常处理，避免应用崩溃。

   • 请求完成后必须调用 destroy() 释放资源。