鸿蒙封装axios

### 封装 Axios 进行 HTTP 请求 在鸿蒙系统中，`Axios` 可以被用来简化 HTTP 请求的操作流程。通过对其功能进行封装，能够提升代码的可维护性和复用性。以下是基于 HarmonyOS 的 Axios 封装方法及其具体实现。 #### 1. 定义网络请求类 `PolarisHttpRequest` 为了更好地管理和扩展网络请求的功能，可以通过创建一个名为 `PolarisHttpRequest` 的类来封装 Axios 实例及相关配置： ```typescript class PolarisHttpRequest { config: HttpRequestConfig; interceptorHooks?: InterceptorHooks; instance: AxiosInstance; constructor(config: HttpRequestConfig) { this.config = config; this.instance = axios.create(this.config); // 创建 Axios 实例 [^1] // 添加拦截器 if (this.interceptorHooks?.requestInterceptor) { this.instance.interceptors.request.use( this.interceptorHooks.requestInterceptor.success, this.interceptorHooks.requestInterceptor.error ); } if (this.interceptorHooks?.responseInterceptor) { this.instance.interceptors.response.use( this.interceptorHooks.responseInterceptor.success, this.interceptorHooks.responseInterceptor.error ); } } request<T>(config: AxiosRequestConfig): Promise<T> { return this.instance.request<T>(config); } get<T>(url: string, params?: any): Promise<T> { return this.instance.get<T>(url, { params }); } post<T>(url: string, data?: any): Promise<T> { return this.instance.post<T>(url, data); } } ``` 上述代码实现了基本的 GET 和 POST 方法，并支持自定义拦截器逻辑。 --- #### 2. 统一管理接口文件 可以在项目中创建一个目录结构用于集中管理 API 接口调用。例如，在 `ets/api/index.ets` 文件中定义统一的接口函数： ```typescript import PolarHttp from '../utils/PolarisHttpRequest'; const BASE_URL = 'https://example.com/api'; // 替换为实际的服务地址 // 初始化网络请求工具 const polarisHttpRequest = new PolarHttp({ baseURL: BASE_URL, timeout: 10000, }); export function fetchUserInfo(page: number, pageSize: number) { const url = '/user/info'; const params = { page, pageSize }; return polarisHttpRequest.post<ESObject>(url, params).then(response => response.data); } export function updateProfile(data: object) { const url = '/profile/update'; return polarisHttpRequest.put<ESObject>(url, data).then(response => response.data); } ``` 此部分展示了如何通过封装后的 `PolarisHttpRequest` 类发起具体的 HTTP 请求[^3]。 --- #### 3. 使用示例 以下是一个完整的使用案例，展示如何调用封装好的 API 函数获取用户信息并处理返回的数据： ```typescript import { fetchUserInfo } from './api/index'; function main() { const page = 1; const pageSize = 10; fetchUserInfo(page, pageSize) .then(userInfo => { console.log('User Info:', userInfo); }) .catch(error => { console.error('Error fetching user info:', error.message); }); } main(); ``` 该示例演示了如何通过封装的 `fetchUserInfo` 方法向服务端发送 POST 请求，并捕获可能发生的错误[^4]。 --- #### 4. 拦截器的应用 如果需要对请求或响应做额外的预处理操作（如添加 Token 或解析状态码），可以设置拦截器钩子： ```typescript interface InterceptorHooks { requestInterceptor?: { success?(config: AxiosRequestConfig): AxiosRequestConfig; error?(error: Error): Promise<void>; }, responseInterceptor?: { success?(response: AxiosResponse): AxiosResponse; error?(error: Error): Promise<void>; } } const hooks: InterceptorHooks = { requestInterceptor: { success(config) { config.headers['Authorization'] = 'Bearer your_token_here'; return config; }, }, responseInterceptor: { success(response) { if (response.status !== 200) { throw new Error(`Unexpected status code: ${response.status}`); } return response; }, }, }; const httpRequestWithInterceptors = new PolarisHttpRequest({ ...defaultConfig }, hooks); ``` 以上代码片段说明了如何通过拦截器动态修改请求头以及验证响应的状态码。 --- ### 总结 通过对 Axios 的二次封装，不仅可以提高项目的灵活性和可读性，还能方便地集成全局性的功能需求（如日志记录、Token 刷新等）。结合 HarmonyOS 提供的基础模块 [@ohos/net.http][^2]，开发者能够在更复杂的场景下轻松完成数据交互任务。