HarmonyOS 鸿蒙Next开发者技术支持-基于 RCP 封装类似 Axios 的 API 模式

一、 关键技术难点总结

在鸿蒙开发中，可以使用 RCP（Remote Communication Kit）模块来封装一个类似 Axios 的 API 模式，以便更方便地进行网络请求。以下是一个完整的封装方案，包括请求拦截、响应拦截、配置管理等功能。

1.1 问题说明

在鸿蒙应用开发过程中，网络请求是实现应用功能的核心基础，但在实际开发中，开发者面临以下常见问题：

1. 代码冗余和重复：每个网络请求都需要重复编写创建会话、配置参数、错误处理等基础代码，导致代码臃肿且难以维护
2. 功能分散不统一：网络请求逻辑散落在应用的各个模块中，缺乏统一的请求/响应拦截机制，难以实现全局的日志记录、权限验证等功能
3. 配置管理混乱：每个请求独立配置基础地址、请求头等信息，当接口地址变更或需要全局调整时，修改成本极高
4. 缺乏标准化处理：缺少统一的错误处理、公共请求头管理等机制，导致不同开发者的实现方式不统一，用户体验不一致
5. 开发效率低下：每次网络请求都需要从头编写完整的请求流程，增加了开发时间和出错概率

1.2 原因分析

这些问题主要源于鸿蒙RCP模块本身的设计定位和开发模式的局限性：

1. API层级较低：RCP模块提供了基础的网络通信能力，但属于较低级别的API，开发者需要自行构建上层封装才能满足实际业务需求
2. 无内置拦截器机制：RCP模块没有原生支持类似Axios的拦截器（Interceptor）模式，导致全局请求/响应处理需要手动在每次请求中实现
3. 缺乏高级抽象：RCP的Session和Request对象虽然灵活，但使用起来较为繁琐，缺乏对常见网络请求模式的优化和封装
4. 配置分散：由于每次请求都是独立的，没有共享的配置管理中心，导致相同配置在多处重复设置
5. 错误处理分散：RCP的错误处理需要在每个请求的回调中单独处理，难以实现统一的错误监控和异常上报机制

1.3 解决思路

为解决上述问题，我们借鉴前端开发中成熟的Axios库设计理念，提出以下封装思路：

1. 创建中心化的HttpService类：封装RCP的核心功能，提供类似Axios的API风格，简化网络请求的使用
2. 实现拦截器机制：通过自定义拦截器接口，支持请求前、响应后的统一处理逻辑
3. 统一的配置管理：支持全局配置和请求级配置的灵活组合，确保配置的一致性
4. 模块化设计：将不同功能（请求处理、拦截器、错误处理等）拆分为独立的模块，提高代码的可维护性和可扩展性
5. 类型安全的TypeScript支持：利用TypeScript/ETS的类型系统，提供更好的开发体验和代码提示

1.4 解决方案

1、封装 Axios 风格的 API

1.1 创建 HttpService 类

封装一个 HttpService 类，用于管理网络请求和响应。

import { rcp } from ‘@kit.RemoteCommunicationKit’;

export class HttpService { private _session: rcp.Session; private _baseAddress: string; private _headers: rcp.RequestHeaders; private _interceptors: rcp.Interceptor[] = []; constructor(config: { baseAddress: string; headers?: rcp.RequestHeaders }) { this._baseAddress = config.baseAddress; this._headers = config.headers || {}; this._session = rcp.createSession({ baseAddress: this._baseAddress, headers: this._headers }); } // 添加请求拦截器 public addRequestInterceptor(interceptor: rcp.Interceptor) { this._interceptors.push(interceptor); this._session.addInterceptor(interceptor); } // 添加响应拦截器 public addResponseInterceptor(interceptor: rcp.Interceptor) { this._interceptors.push(interceptor); this._session.addInterceptor(interceptor); } // 发起请求 public async request<T>(url: string, method: string, data?: any, headers?: rcp.RequestHeaders): Promise<T> { const requestHeaders = { …this._headers, …headers }; const req = new rcp.Request(url, method, requestHeaders, data); try { const response = await this._session.fetch(req); return response.json(); } catch (err) { throw new Error(Request failed: ${err.message}); } } // GET 请求 public async get<T>(url: string, headers?: rcp.RequestHeaders): Promise<T> { return this.request<T>(url, ‘GET’, undefined, headers); } // POST 请求 public async post<T>(url: string, data?: any, headers?: rcp.RequestHeaders): Promise<T> { return this.request<T>(url, ‘POST’, data, headers); } // PUT 请求 public async put<T>(url: string, data?: any, headers?: rcp.RequestHeaders): Promise<T> { return this.request<T>(url, ‘PUT’, data, headers); } // DELETE 请求 public async delete<T>(url: string, headers?: rcp.RequestHeaders): Promise<T> { return this.request<T>(url, ‘DELETE’, undefined, headers); } }

1.2 创建拦截器

定义请求拦截器和响应拦截器。

// 请求拦截器 export class RequestInterceptor implements rcp.Interceptor { async intercept(context: rcp.RequestContext, next: rcp.RequestHandler): Promise<rcp.Response> { console.log(Requesting ${context.request.url.href}); return next.handle(context); } } // 响应拦截器 export class ResponseInterceptor implements rcp.Interceptor { async intercept(context: rcp.RequestContext, next: rcp.RequestHandler): Promise<rcp.Response> { const response = await next.handle(context); console.log(Response received: ${response.statusCode}); return response; } }

1.3 使用 HttpService

在实际项目中使用封装的 HttpService。

import { HttpService, RequestInterceptor, ResponseInterceptor } from ‘./HttpService’;

const http = new HttpService({ baseAddress: ‘’, headers: { ‘Content-Type’: ‘application/json’ } }); // 添加请求拦截器 http.addRequestInterceptor(new RequestInterceptor()); // 添加响应拦截器 http.addResponseInterceptor(new ResponseInterceptor()); // 发起 GET 请求 http.get<any>(’/users’).then((response) => { console.log(‘GET Response:’, response); }).catch((error) => { console.error(‘GET Error:’, error); }); // 发起 POST 请求 http.post<any>(’/users’, { name: ‘John Doe’ }).then((response) => { console.log(‘POST Response:’, response); }).catch((error) => { console.error(‘POST Error:’, error); });

2、封装公共请求头

2.1 使用公共请求头拦截器

在 HttpService 中添加公共请求头拦截器。

http.addRequestInterceptor(new CommonHeaderInterceptor());

封装公共请求头，确保每个请求都携带必要的信息。

export async function getCommonHeaders(): Promise<rcp.RequestHeaders> { return { ‘device’: ‘deviceInfo’, ‘token’: ‘userToken’, ‘timestamp’: new Date().toISOString() }; } export class CommonHeaderInterceptor implements rcp.Interceptor { async intercept(context: rcp.RequestContext, next: rcp.RequestHandler): Promise<rcp.Response> { const commonHeaders = await getCommonHeaders(); context.request.headers = { …context.request.headers, …commonHeaders }; return next.handle(context); } }

3、错误处理

3.1 使用错误处理拦截器

在 HttpService 中添加错误处理拦截器

http.addResponseInterceptor(new ErrorInterceptor());

封装错误处理逻辑，统一处理网络请求中的错误。

export class ErrorInterceptor implements rcp.Interceptor { async intercept(context: rcp.RequestContext, next: rcp.RequestHandler): Promise<rcp.Response> { try { return await next.handle(context); } catch (err) { console.error(‘Request failed:’, err); throw err; } } }