ArkTS HTTP网络请求：从数据获取到UI渲染全流程

【免费下载链接】harmonyos-tutorial HarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》 项目地址: https://gitcode.com/GitHub_Trending/ha/harmonyos-tutorial

你是否还在为HarmonyOS应用中的网络数据获取和界面更新而烦恼？本文将带你从零开始掌握ArkTS HTTP网络请求的完整流程，包括权限配置、数据请求、错误处理和UI渲染，让你的应用轻松实现网络数据交互。读完本文，你将能够独立完成从服务器获取数据并动态更新应用界面的全部开发工作。

开发环境与项目结构

在开始之前，请确保你的开发环境已正确配置HarmonyOS SDK，并创建了支持ArkTS的应用项目。本教程的示例代码来自项目中的ArkTSHttp示例，该示例展示了如何使用ArkTS发起HTTP请求并处理响应数据。

项目的核心代码位于entry/src/main/ets/pages/Index.ets文件中，我们将以此为基础展开讲解。

权限配置

进行网络请求前，需要在应用配置文件中声明网络访问权限。在module.json5文件中添加以下权限声明：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

HTTP请求基础实现

导入网络模块

首先需要导入HarmonyOS提供的网络模块，以便使用HTTP相关功能：

// 导入http模块
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';

创建请求方法

在组件中定义一个处理HTTP请求的方法，该方法将使用http.createHttp()创建请求对象，并配置请求参数：

private httpReq() {
  // 创建httpRequest对象
  let httpRequest = http.createHttp();

  let url = "https://waylau.com/data/people.json";
  let promise = httpRequest.request(
    url,
    {
      method: http.RequestMethod.GET,
      connectTimeout: 60000,
      readTimeout: 60000,
      header: {
        'Content-Type': 'application/json'
      }
    }
  );
  // 处理响应结果...
}

处理响应与错误

使用Promise处理请求结果，包括成功响应和错误处理：

promise.then((data) => {
  if (data.responseCode === http.ResponseCode.OK) {
    console.info('Result:' + data.result);
    console.info('code:' + data.responseCode);
    this.message = JSON.stringify(data.result);
  }
}).catch((err: BusinessError) => {
  console.info('error:' + JSON.stringify(err));
});

UI组件与数据绑定

状态变量定义

在组件中定义一个状态变量，用于存储和展示请求结果：

@State message: string = 'Hello World'

构建UI界面

使用ArkTS的UI组件构建界面，包括一个按钮用于触发请求和一个文本组件用于显示结果：

build() {
  Row() {
    Column() {
      Text(this.message)
        .fontSize(38)
        .fontWeight(FontWeight.Bold)

      Button(('请求'), { type: ButtonType.Capsule })
        .width(140)
        .fontSize(40)
        .fontWeight(FontWeight.Medium)
        .margin({ top: 20, bottom: 20 })
        .onClick(() => {
          this.httpReq()
        })
    }
    .width('100%')
  }
  .height('100%')
}

完整代码实现

将以上各部分整合起来，就是一个完整的HTTP请求与UI渲染示例。下面是完整的Index.ets文件代码：

// 导入http模块
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(38)
          .fontWeight(FontWeight.Bold)

        // 请求按钮
        Button(('请求'), { type: ButtonType.Capsule })
          .width(140)
          .fontSize(40)
          .fontWeight(FontWeight.Medium)
          .margin({ top: 20, bottom: 20 })
          .onClick(() => {
            this.httpReq()
          })
      }
      .width('100%')
    }
    .height('100%')
  }

  private httpReq() {
    // 创建httpRequest对象。
    let httpRequest = http.createHttp();

    let url = "https://waylau.com/data/people.json";
    let promise = httpRequest.request(
      // 请求url地址
      url,
      {
        // 请求方式
        method: http.RequestMethod.GET,
        // 可选，默认为60s
        connectTimeout: 60000,
        // 可选，默认为60s
        readTimeout: 60000,
        // 开发者根据自身业务需要添加header字段
        header: {
          'Content-Type': 'application/json'
        }
      });

    // 处理响应结果。
    promise.then((data) => {
      if (data.responseCode === http.ResponseCode.OK) {
        console.info('Result:' + data.result);
        console.info('code:' + data.responseCode);
        this.message = JSON.stringify(data.result);
      }
    }).catch((err: BusinessError) => {
      console.info('error:' + JSON.stringify(err));
    });
  }
}

进阶应用：JSON数据解析与列表展示

定义数据模型

为了更好地管理和展示网络请求返回的数据，我们可以定义一个数据模型接口：

interface Person {
  id: number;
  name: string;
  age: number;
  email: string;
}

解析JSON数据

在请求成功的回调中，将JSON字符串解析为定义的数据模型：

let persons: Person[] = JSON.parse(data.result as string);
this.persons = persons;

使用List组件展示数据

使用ArkTS的List组件动态展示解析后的数据：

List() {
  ForEach(this.persons, (person: Person) => {
    ListItem() {
      Column() {
        Text(`Name: ${person.name}`)
          .fontSize(20)
        Text(`Age: ${person.age}`)
          .fontSize(16)
          .color(Color.Gray)
      }
      .width('100%')
      .padding(10)
    }
  })
}

错误处理与用户体验优化

加载状态提示

在请求过程中，可以添加加载状态提示，提升用户体验：

@State isLoading: boolean = false;

// 在请求开始前设置isLoading为true
this.isLoading = true;

// 请求完成后设置isLoading为false
promise.then(() => {
  this.isLoading = false;
}).catch(() => {
  this.isLoading = false;
});

错误信息展示

将错误信息以友好的方式展示给用户：

@State errorMsg: string = '';

// 在catch回调中设置错误信息
.catch((err: BusinessError) => {
  this.errorMsg = `请求失败: ${err.message}`;
});

完整流程图

以下是ArkTS HTTP网络请求从数据获取到UI渲染的完整流程：

总结与扩展学习

通过本文的学习，你已经掌握了ArkTS HTTP网络请求的基本使用方法和最佳实践。从权限配置、请求发送到数据处理和UI渲染，我们覆盖了实现网络数据交互的全部关键步骤。

想要进一步提升你的网络请求处理能力，可以学习以下内容：

• 使用@ohos.net.http模块的高级特性，如POST请求、文件上传等
• 实现网络请求的封装与复用
• 学习数据缓存策略，减少不必要的网络请求
• 掌握更复杂的错误处理和重试机制

更多HarmonyOS开发教程和示例代码，请参考项目中的README.md和其他示例项目，如ArkTSJsonParser和ArkTSNetwork。

希望本文能帮助你更好地理解和应用ArkTS的网络请求功能，为你的HarmonyOS应用开发带来更多可能！

【免费下载链接】harmonyos-tutorial HarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》 项目地址: https://gitcode.com/GitHub_Trending/ha/harmonyos-tutorial