ArkTS中HTTP请求的封装与使用

在ArkTS（HarmonyOS的TypeScript开发框架）中，HTTP请求是一个常见的需求。通过封装HTTP请求，可以提高代码的复用性和可维护性，同时简化调用逻辑。本文将详细介绍如何在ArkTS中封装和使用HTTP请求，并讨论一些相关的扩展话题。

1. HTTP请求的基本概念

HTTP（HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议。在移动应用开发中，HTTP请求通常用于与服务器进行数据交互，包括获取数据、提交数据等操作。常见的HTTP方法有GET、POST、PUT、DELETE等。

在ArkTS中，可以通过@ohos.network.http模块来发起HTTP请求。该模块提供了原生的HTTP客户端支持，适合用于构建高效的网络通信功能。

2. 封装HTTP请求的原因

直接使用http.request方法虽然简单，但每次都需要重复编写相同的代码，例如设置请求头、处理错误、解析响应等。为了提升开发效率和代码质量，我们可以通过封装HTTP请求实现以下目标：

• 统一管理请求参数：如Token、用户ID等全局参数。
• 集中处理错误：统一捕获和处理网络错误或服务器返回的异常状态码。
• 简化调用逻辑：提供更简洁的API供业务代码调用。

3. 封装HTTP请求的实现步骤

3.1 引入必要的模块

在ArkTS中，我们需要引入@ohos.network.http模块来发起HTTP请求。以下是基本的引入方式：

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

3.2 创建HTTP请求工具类

我们可以创建一个工具类HttpService来封装HTTP请求。以下是具体实现：

class HttpService {
  private baseUrl: string = 'https://api.example.com'; // 替换为你的API基础地址

  // 发起GET请求
  public async get<T>(url: string, params?: Record<string, any>): Promise<T> {
    const requestUrl = this.buildUrl(url, params);
    return this.sendRequest('GET', requestUrl);
  }

  // 发起POST请求
  public async post<T>(url: string, data?: Record<string, any>): Promise<T> {
    return this.sendRequest('POST', this.baseUrl + url, data);
  }

  // 构建完整的URL
  private buildUrl(url: string, params?: Record<string, any>): string {
    if (!params) return this.baseUrl + url;
    const queryParams = new URLSearchParams(params).toString();
    return `${this.baseUrl}${url}?${queryParams}`;
  }

  // 发送HTTP请求
  private async sendRequest<T>(method: string, url: string, data?: Record<string, any>): Promise<T> {
    try {
      const options: http.HttpRequestOptions = {
        method,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${this.getToken()}`, // 替换为实际的Token获取逻辑
        },
      };

      if (data) {
        options.body = JSON.stringify(data);
      }

      const response = await http.request(url, options);
      if (response.statusCode >= 200 && response.statusCode < 300) {
        return JSON.parse(response.body) as T;
      } else {
        throw new Error(`Request failed with status code ${response.statusCode}`);
      }
    } catch (error) {
      console.error('HTTP Request Error:', error);
      throw error;
    }
  }

  // 获取Token（示例方法）
  private getToken(): string {
    return 'your-auth-token'; // 实际实现应从存储中读取Token
  }
}

// 导出实例化对象
export const httpService = new HttpService();

3.3 使用封装后的HTTP请求

在业务代码中，可以直接调用httpService提供的方法来发起HTTP请求。例如：

import { httpService } from './HttpService';

async function fetchUserData() {
  try {
    const response = await httpService.get('/user');
    console.log('User Data:', response);
  } catch (error) {
    console.error('Failed to fetch user data:', error);
  }
}

async function submitFormData(formData: Record<string, any>) {
  try {
    const response = await httpService.post('/submit', formData);
    console.log('Form Submission Response:', response);
  } catch (error) {
    console.error('Failed to submit form data:', error);
  }
}

4. 扩展讨论

4.1 请求拦截器与响应拦截器

为了进一步增强HTTP请求的功能，可以引入拦截器机制。例如，在请求发送前添加通用参数，或在响应返回后进行数据预处理。

以下是简单的拦截器实现：

class HttpService {
  // 添加请求拦截器
  private beforeRequest(options: http.HttpRequestOptions): void {
    options.headers['Custom-Header'] = 'Value';
  }

  // 添加响应拦截器
  private afterResponse<T>(response: http.HttpResponse): T {
    if (response.statusCode === 401) {
      // 处理未授权的情况
      console.warn('Unauthorized access detected.');
    }
    return JSON.parse(response.body) as T;
  }

  // 修改sendRequest方法以支持拦截器
  private async sendRequest<T>(method: string, url: string, data?: Record<string, any>): Promise<T> {
    const options: http.HttpRequestOptions = {
      method,
      headers: {},
    };
    this.beforeRequest(options);

    if (data) {
      options.body = JSON.stringify(data);
    }

    const response = await http.request(url, options);
    return this.afterResponse(response);
  }
}

4.2 状态图表示请求流程

以下是一个简单的状态图，描述了HTTP请求的完整流程：

stateDiagram-v2
    [*] --> Idle
    Idle --> Sending : sendRequest()
    Sending --> Receiving : Server responds
    Receiving --> Success : statusCode 2xx
    Receiving --> Error : statusCode >= 400
    Success --> Idle
    Error --> Idle

5. 总结

通过封装HTTP请求，我们可以在ArkTS项目中实现更高效、更优雅的网络通信功能。封装不仅简化了业务代码的复杂度，还提升了代码的可维护性和扩展性。