【HarmonyOS5】在鸿蒙应用开发中使用第三方库 Axios 的实践指南#DevEco Studio#

在鸿蒙应用开发中使用第三方库 Axios 的实践指南#DevEco Studio#

在鸿蒙（HarmonyOS）应用开发中，网络请求是连接客户端与后端服务的核心环节。虽然鸿蒙原生提供了 http 模块，但其 API 设计较为底层，对开发者友好度有限。而 Axios 作为广受欢迎的前端 HTTP 客户端库，通过鸿蒙社区移植的 @ohos/axios 库，为开发者提供了更简洁、功能更丰富的解决方案。本文将深入探讨如何在鸿蒙应用中高效使用 Axios。

一、Axios 在鸿蒙中的特性与优势

1. 核心特性

Promise 风格：支持链式调用，简化异步操作流程。
拦截器机制：可对请求和响应进行全局预处理（如添加 Token、统一错误处理）。
多请求方式：支持 GET、POST、PUT、DELETE 等标准 HTTP 方法。
数据自动转换：自动处理 JSON 序列化与反序列化。
配置灵活性：支持全局默认配置、代理设置及 HTTPS 证书管理。

2. 与原生 HTTP 模块的对比

特性	原生 `http` 模块	Axios
API 设计	回调函数为主	Promise 链式调用
拦截器	无	支持请求/响应拦截
错误处理	需手动解析状态码	自动统一错误处理
开发体验	低	高（类前端开发习惯）

二、Axios 的安装与配置

1. 安装步骤

方式一：通过 `ohpm` 命令安装

perl 复制代码

# 在项目终端执行（全局安装）
ohpm install @ohos/axios@2.2.4

方式二：手动配置依赖

在 oh-package.json5 中添加依赖：

css 复制代码

dependencies: {
  "@ohos/axios": "2.2.4"
}

同步项目后，DevEco Studio 会自动安装。

2. 权限配置

在 module.json5 中声明网络权限：

json 复制代码

"requestPermissions": [
  {"name": "ohos.permission.INTERNET"}
]

若需访问本地文件或敏感资源，还需添加对应权限。

三、Axios 的基础使用

1. 创建实例与基础请求

typescript 复制代码

import axios from '@ohos/axios';

// 创建实例（配置基地址与超时时间）
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

// 发送 GET 请求
instance.get('/users')
  .then(response => {
    console.log(response.data); // 直接获取解析后的 JSON 数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

2. 请求参数传递

查询参数（GET）：

csharp 复制代码

instance.get('/search', {
  params: { keyword: '鸿蒙' }
});

表单数据（POST）：

less 复制代码

instance.post('/submit', new URLSearchParams({
  username: 'user123',
  password: 'secret'
}));

四、高级功能：拦截器与封装

1. 请求/响应拦截器

ini 复制代码

// 请求拦截器（全局添加 Token）
instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 响应拦截器（统一错误处理）
instance.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response?.status === 401) {
      promptAction.showToast({ message: '登录已过期' });
      router.replaceUrl('/login');
    }
    return Promise.reject(error);
  }
);

2. 封装通用请求方法