鸿蒙ArkUI开发三 - HTTP请求功能

HTTP请求功能

数据由AI生成。

一、HTTP请求基础使用

在鸿蒙ArkUI中，使用@ohos.net.http模块进行HTTP请求：

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

// 创建HTTP请求对象
let httpRequest = http.createHttp();

// 发起GET请求示例
httpRequest.request(
  "https://api.example.com/data",
  {
    method: 'GET',
    header: {
      'Content-Type': 'application/json'
    }
  },
  (err, data) => {
    if (err) {
      console.error('请求失败:', err);
      return;
    }
    console.log('请求结果:', data.result);
  }
);

二、常驻配置请求接口地址

建议创建一个配置文件httpConfig.ts：

// httpConfig.ts
export const HttpConfig = {
  baseUrl: 'https://api.example.com',
  timeout: 60000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
};

三、封装HTTP请求类

创建httpService.ts封装类：

// httpService.ts
import http from '@ohos.net.http';
import { HttpConfig } from './httpConfig';

export class HttpService {
  private static instance: HttpService;
  private httpRequest: http.HttpRequest;

  private constructor() {
    this.httpRequest = http.createHttp();
  }

  public static getInstance(): HttpService {
    if (!HttpService.instance) {
      HttpService.instance = new HttpService();
    }
    return HttpService.instance;
  }

  public async get(url: string, params?: object): Promise<any> {
    return this.request('GET', url, params);
  }

  public async post(url: string, data?: object): Promise<any> {
    return this.request('POST', url, data);
  }

  private async request(method: string, url: string, data?: any): Promise<any> {
    const fullUrl = `${HttpConfig.baseUrl}${url}`;
    const options = {
      method: method,
      header: HttpConfig.headers,
      readTimeout: HttpConfig.timeout,
      connectTimeout: HttpConfig.timeout
    };

    if (method === 'GET' && data) {
      // 处理GET请求参数
      const query = Object.keys(data)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
        .join('&');
      url = `${url}?${query}`;
    } else if (data) {
      // 处理POST等请求的body
      options['extraData'] = JSON.stringify(data);
    }

    return new Promise((resolve, reject) => {
      this.httpRequest.request(
        fullUrl,
        options,
        (err, response) => {
          if (err) {
            reject(err);
            return;
          }
          try {
            const result = JSON.parse(response.result as string);
            resolve(result);
          } catch (e) {
            reject(new Error('解析响应数据失败'));
          }
        }
      );
    });
  }
}

四、使用封装好的请求类

1. 引用封装类

import { HttpService } from './httpService';

// 获取单例实例
const httpService = HttpService.getInstance();

2. 发起GET请求

async function fetchData() {
  try {
    const response = await httpService.get('/api/data', {
      page: 1,
      size: 10
    });
    console.log('获取数据成功:', response);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

fetchData();

3. 发起POST请求

async function submitData() {
  try {
    const response = await httpService.post('/api/submit', {
      name: '张三',
      age: 25
    });
    console.log('提交数据成功:', response);
  } catch (error) {
    console.error('提交数据失败:', error);
  }
}

submitData();

五、注意事项

1. 所有请求都是异步的，不会阻塞UI线程

2. 使用Promise封装，可以用async/await语法简化调用

3. 单例模式确保全局只有一个HTTP实例

4. 错误处理通过try-catch捕获

这样封装后，项目中所有HTTP请求都可以通过简单的方法调用完成，代码更简洁，维护更方便。