ArkUI 中的网络请求封装

1. 引言

在鸿蒙 ArkUI 开发中，网络请求是应用程序与后端服务器交互的重要方式，例如获取数据、提交表单等。为了提高代码的复用性和可维护性，我们通常会对网络请求进行封装，统一处理请求参数、错误处理等。本文将详细讲解如何封装网络请求并提供实际应用示例。

2. 使用 @ohos.net.http 发送 HTTP 请求

鸿蒙系统提供了 @ohos.net.http 模块用于发起网络请求，我们可以使用该模块进行 GET 和 POST 请求。

2.1 安装网络请求模块

如果默认项目中没有包含 @ohos.net.http，可以使用 ohpm 进行安装：

ohpm install @ohos.net.http --save

然后在代码中导入：

import http from '@ohos.net.http';

3. 封装通用的网络请求方法

我们可以创建一个 HttpService 统一封装 GET 和 POST 请求，处理请求参数、超时设置、错误处理等。

import http from '@ohos.net.http';

export class HttpService {
  static BASE_URL: string = 'https://api.example.com';

  static async request(url: string, options: { method: string; data?: any; headers?: any }) {
    return new Promise((resolve, reject) => {
      const httpRequest = http.createHttp();
      httpRequest.request(
        `${this.BASE_URL}${url}`,
        {
          method: options.method,
          header: options.headers || { 'Content-Type': 'application/json' },
          extraData: options.data ? JSON.stringify(options.data) : undefined,
          readTimeout: 5000,
          connectTimeout: 5000
        },
        (err, data) => {
          if (err) {
            reject(err);
          } else {
            try {
              resolve(JSON.parse(data.result));
            } catch (error) {
              reject(error);
            }
          }
        }
      );
    });
  }

  static async get(url: string) {
    return this.request(url, { method: 'GET' });
  }

  static async post(url: string, data: any) {
    return this.request(url, { method: 'POST', data });
  }
}

3.1 代码解析

• BASE_URL: 设定 API 基础地址。
• request(url, options): 统一封装网络请求，支持 GET 和 POST。
• get(url): 发送 GET 请求。
• post(url, data): 发送 POST 请求。

4. 在 ArkUI 组件中使用封装的请求

在 ArkUI 组件中，我们可以调用 HttpService 进行数据请求。例如，在 UserPage 组件中获取用户信息：

import { Component, State } from '@ohos.arkui';
import HttpService from '../common/HttpService';

@Component
export struct UserPage {
  @State userData: any = null;

  async fetchUserData() {
    try {
      this.userData = await HttpService.get('/user/info');
    } catch (error) {
      console.error('请求失败:', error);
    }
  }

  build() {
    Column({ space: 20 }) {
      Button('获取用户信息')
        .onClick(() => this.fetchUserData())
        .backgroundColor('#007BFF')
        .textColor('#FFFFFF')
        .borderRadius(5)
        .padding(10);

      If(this.userData, () =>
        Text(`用户名: ${this.userData?.name}`)
          .fontSize(18)
          .textColor('#333333')
      );
    }
    .padding(20)
    .alignItems('center');
  }
}

代码解析

• fetchUserData(): 调用 HttpService.get 获取用户信息。
• Button 点击后触发网络请求并更新状态。
• If(this.userData, () => ...) 用于条件渲染，显示获取到的用户信息。

5. 运行应用

确保网络权限已在 config.json5 中声明：

"reqPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

5. 处理错误和超时

在 HttpService 中可以增加错误处理，例如：

static async request(url: string, options: { method: string; data?: any; headers?: any }) {
  return new Promise((resolve, reject) => {
    const httpRequest = http.createHttp();
    httpRequest.request(
      `${this.BASE_URL}${url}`,
      {
        method: options.method,
        header: options.headers || { 'Content-Type': 'application/json' },
        extraData: options.data ? JSON.stringify(options.data) : undefined,
        readTimeout: 5000,
        connectTimeout: 5000
      },
      (err, data) => {
        if (err) {
          reject({ message: '网络请求失败', error: err });
        } else {
          try {
            resolve(JSON.parse(data.result));
          } catch (error) {
            reject({ message: 'JSON 解析失败', error });
          }
        }
      }
    );
  });
}

如果请求超时或者服务器返回错误，调用方可以捕获错误信息并作出处理。

6. 总结

本文介绍了鸿蒙 ArkUI 中 @ohos.net.http 模块的使用方法，并封装了 HttpService 以便于统一管理 GET 和 POST 请求。我们还展示了如何在 ArkUI 组件中调用该封装，并进行了错误处理优化。通过合理封装网络请求，可以提高代码复用性，简化业务逻辑，使应用开发更加高效。