arkts axios

### ArkTS 封装 Axios 示例代码 在 ArkTS 中封装 Axios，可以实现更简洁的 HTTP 请求管理。以下是一个完整的封装示例： #### 1. 定义基础配置和拦截器 首先创建一个 `PolarisHttpRequest` 类，用于定义基础配置、拦截器以及 Axios 实例。 ```typescript // ets/utils/http/PolarisHttpRequest.ts import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; export interface HttpRequestConfig { baseURL?: string; timeout?: number; headers?: any; } export interface InterceptorHooks { requestInterceptor?(config: AxiosRequestConfig): AxiosRequestConfig; responseInterceptor?(response: AxiosResponse): AxiosResponse; } export class PolarisHttpRequest { config: HttpRequestConfig; interceptorHooks?: InterceptorHooks; instance: AxiosInstance; constructor(config: HttpRequestConfig, interceptorHooks?: InterceptorHooks) { this.config = config; this.interceptorHooks = interceptorHooks; this.instance = axios.create(config); // 添加请求拦截器 if (this.interceptorHooks?.requestInterceptor) { this.instance.interceptors.request.use(this.interceptorHooks.requestInterceptor); } // 添加响应拦截器 if (this.interceptorHooks?.responseInterceptor) { this.instance.interceptors.response.use(this.interceptorHooks.responseInterceptor); } } get(url: string, params?: any): Promise<any> { return this.instance.get(url, { params }); } post(url: string, data?: any): Promise<any> { return this.instance.post(url, data); } } ``` #### 2. 创建封装工具类 接下来创建一个工具类文件，用于统一管理 HTTP 请求实例。 ```typescript // ets/utils/http/index.ts import { PolarisHttpRequest, HttpRequestConfig, InterceptorHooks } from './PolarisHttpRequest'; const defaultConfig: HttpRequestConfig = { baseURL: 'https://api.example.com', timeout: 10000, headers: { 'Content-Type': 'application/json', }, }; const defaultInterceptorHooks: InterceptorHooks = { requestInterceptor(config) { console.log('Request Interceptor:', config); return config; }, responseInterceptor(response) { console.log('Response Interceptor:', response); return response.data; }, }; export const httpRequest = new PolarisHttpRequest(defaultConfig, defaultInterceptorHooks); ``` #### 3. 使用封装后的 HTTP 请求 最后，在实际项目中使用封装好的 HTTP 请求工具。 ```typescript // ets/pages/Home.ets import { httpRequest } from '../../utils/http/index'; async function fetchUserData() { try { const response = await httpRequest.get('/user/data'); console.log('User Data:', response); return response; } catch (error) { console.error('Error fetching user data:', error); throw error; } } async function createUser(data: any) { try { const response = await httpRequest.post('/user/create', data); console.log('User Created:', response); return response; } catch (error) { console.error('Error creating user:', error); throw error; } } ``` 通过上述封装，开发者可以在项目中轻松调用 `httpRequest` 实例进行 HTTP 请求，同时支持自定义配置和拦截器[^1]。 --- ###

### 在 ArkTS 中使用 Axios 发起 HTTP 请求 为了在鸿蒙ArkTS环境中成功发起HTTP请求，可以利用`axios`库来简化这一过程[^1]。首先需要确保项目环境支持并正确引入了`axios`包。 对于具体实现方法，在代码层面可以通过如下方式完成初始化配置： ```javascript import axios from 'axios'; // 创建一个新的axios实例以便于自定义配置 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置基础URL timeout: 5000, // 超时时间设置为5秒 }); ``` 之后便能够通过此实例来进行GET或者POST等类型的请求操作： 针对GET请求的例子展示如下： ```javascript instance.get('/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(error); }); ``` 而对于POST请求，则可按照下面的方式编写： ```javascript instance.post('/submit', { param1: 'value1', param2: 'value2' }) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(error); }); ``` 考虑到项目的长期维护性和扩展性，建议把上述创建好的axios实例以及常用的请求函数封装到独立文件里去，这样不仅有助于保持良好的编码习惯还能提高团队协作效率。