鸿蒙封装axios请求接口

<think>好的，我现在需要帮助用户解决在鸿蒙系统中封装Axios以实现接口请求的问题。首先，我得理解用户的具体需求。用户提到想了解如何封装Axios，给出示例，可能涉及到代码结构、配置、拦截器等方面。 接下来，我要回忆一下鸿蒙系统开发的相关知识。鸿蒙使用的是ArkTS，类似于TypeScript，所以代码结构应该与TS相似。然后，用户提供的引用内容中有几个关键点：使用axios的create方法创建实例、拦截器、接口统一管理等。例如，引用[3]提到了创建axios实例和管理接口文件，引用[4]展示了一个使用axios.post的示例函数。 我需要将这些信息整合起来，提供一个清晰的步骤说明。首先，可能需要安装或引入Axios库。不过，鸿蒙的Axios可能和Web端的有所不同，需要确认是否已经内置或有特定的OHPM包。然后，创建axios实例，设置基础配置，比如baseURL、超时时间等。接下来，添加拦截器，处理请求和响应的公共逻辑，比如添加token、处理错误。最后，封装具体的请求方法，比如get、post，并统一管理API接口。 需要注意代码的正确性，比如在ArkTS中，异步处理可能需要使用async/await，并且正确处理Promise。另外，拦截器的使用和错误处理也是关键点，比如在请求拦截器中添加headers，在响应拦截器中检查状态码或数据格式。 用户可能还关心实际的使用示例，比如如何调用封装好的getUserInfo函数，所以需要提供一个完整的示例，从创建实例到定义接口函数，再到组件中使用。同时，要确保代码中的语法符合ArkTS的要求，比如导入模块的方式、类型定义等。 最后，生成相关问题时要围绕封装Axios的进一步优化、拦截器的高级应用、TypeScript的集成以及错误处理的具体方法，这样用户可以有后续的学习方向。</think>### 鸿蒙系统使用Axios封装HTTP接口请求步骤 #### 1. **安装与引入Axios** 鸿蒙系统通过`@ohos/axios`库实现网络请求，需在`oh-package.json5`中声明依赖： ```json "dependencies": { "@ohos/axios": "^2.0.0" } ``` 在代码中导入： ```typescript import axios from '@ohos/axios'; ``` #### 2. **创建Axios实例** 使用`axios.create()`定义基础配置，便于复用： ```typescript // utils/request.ets const instance = axios.create({ baseURL: 'https://api.example.com', // 统一域名 timeout: 15000, // 超时时间 headers: { 'Content-Type': 'application/json' } }); ``` #### 3. **添加拦截器（核心功能）** 拦截器用于统一处理请求/响应： ```typescript // 请求拦截器（添加Token） instance.interceptors.request.use((config) => { const token = AppStorage.get('token'); // 鸿蒙状态管理 if (token) config.headers.Authorization = `Bearer ${token}`; return config; }, (error) => { return Promise.reject(error); }); // 响应拦截器（统一错误处理） instance.interceptors.response.use((response) => { if (response.status !== 200) { throw new Error('服务器异常'); } return response.data; // 直接返回业务数据 }, (error) => { showToast('网络请求失败'); // 鸿蒙UI组件提示 return Promise.reject(error); }); ``` #### 4. **封装请求方法** 定义通用请求函数支持多种请求类型： ```typescript // utils/request.ets export async function http<T>( method: 'GET' | 'POST', url: string, params?: object ): Promise<T> { const config = { method, url, [method === 'GET' ? 'params' : 'data']: params }; return instance.request(config); } ``` #### 5. **统一接口管理** 创建`api/index.ets`集中管理接口： ```typescript // api/index.ets import { http } from '../utils/request'; export const getUserInfo = (params: { page: number }) => { return http<{ list: User[] }>('GET', '/user/info', params); }; export const login = (data: { username: string; password: string }) => { return http<string>('POST', '/auth/login', data); }; ``` #### 6. **组件调用示例** 在ArkUI组件中使用封装后的接口： ```typescript // pages/UserPage.ets import { getUserInfo } from '../api'; @Entry @Component struct UserPage { @State userList: User[] = []; async aboutToAppear() { try { const res = await getUserInfo({ page: 1 }); this.userList = res.list; } catch (e) { console.error('请求失败:', e); } } build() { // UI渲染逻辑 } } ``` #### 关键特性说明 1. **类型安全**：通过泛型`http<T>`定义返回数据类型 2. **状态管理集成**：通过`AppStorage`获取全局状态 3. **错误隔离**：拦截器统一处理网络错误和业务错误 4. **可扩展性**：支持通过`instance.defaults`动态修改配置