【鸿蒙优选三方库】@ohos/axios:前端转鸿蒙,网络层几乎不用改

【鸿蒙优选三方库】@ohos/axios:前端转鸿蒙,网络层几乎不用改

鸿蒙原生的 @ohos.net.http 没有 Promise、没有拦截器,鉴权和错误处理要在每个请求里重写一遍。@ohos/axios 把大家熟悉的 Axios 原样搬了过来------API 一致,改个 import 就能跑。
📦 仓库地址 | ohpm install @ohos/axios | v2.2.13 | MIT


它解决什么问题

写过前端的人都知道 axios 有多顺手:.then().catch() 链式调用、拦截器统一加 Token、FormData 上传、AbortController 取消请求。

到了鸿蒙,这些全要重新造:回调嵌套、每个请求手写 header、文件上传下载自己拼流。老项目迁移过来,网络层几乎等于重写。

@ohos/axios 在底层封装 @ohos.net.http,对外暴露原汁原味的 Axios API。前端经验直接复用。


核心能力

能力 说明
Promise API 告别回调地狱
请求/响应拦截器 鉴权、日志、错误兜底统一处理
泛型支持 ArkTS 下显式指定返回类型,类型安全
上传下载 FormData、URI、ArrayBuffer、断点续传
进度回调 v2.2.13 起普通 GET/POST 也能监听进度
取消请求 AbortController
企业级安全 自定义 CA、双向 mTLS、国密 SSL、证书锁定
性能计时 performanceTiming 给出 DNS/TCP/TLS 各阶段耗时

30 秒上手

ArkTS 不支持隐式 any,调用时显式指定泛型即可:

typescript 复制代码
import axios, { AxiosResponse, AxiosError } from '@ohos/axios'

interface UserInfo { id: number; name: string }

// 拦截器统一加 Token,一次配置全局生效
axios.interceptors.request.use((config) => {
  config.headers['Authorization'] = 'Bearer ' + getToken()
  return config
})

axios.get<UserInfo, AxiosResponse<UserInfo>, null>('/user?ID=12345')
  .then((res: AxiosResponse<UserInfo>) => console.info(res.data.name))
  .catch((err: AxiosError) => console.error(err.message))

三个泛型参数:T 是 response.data 的类型,R 是完整响应类型,D 是请求体类型(GET 传 null)。

下载文件带进度:

typescript 复制代码
axios({
  url: 'https://example.com/photo.jpg',
  method: 'get',
  filePath: getContext(this).cacheDir + '/photo.jpg',
  onDownloadProgress: (e) => {
    console.info(`${Math.ceil(e.loaded / e.total * 100)}%`)
  },
})

社区已解决的典型问题

升级后 getUri(config) 报错 (#464 / #467)

拦截器返回的 config 传入 getUri 时触发日志打印逻辑异常。已在 #466 修复。升级后建议对 getUri 做一轮冒烟测试。

安全漏洞 (#462)

用户报告新漏洞,已修复 CVE-2026-67314、CVE-2026-67315、CVE-2026-67318。仓库有专门的 CVE 响应流程。

普通请求想要进度回调 (#460)

此前只有文件上传下载支持进度。v2.2.13 起,设了进度回调的请求自动切到流式模式,GET/POST 都能监听。注意此时 performanceTiming 为 undefined,两者不可兼得。


适合谁用

  • 从 Web/RN 迁移到鸿蒙:网络层几乎平移
  • 中后台应用:拦截器统一处理 Token 刷新、401 跳登录
  • 有上传下载需求:图床、附件、断点续传开箱即用
  • 金融政企:mTLS、国密 SSL、证书锁定一条龙
  • 前端转鸿蒙的开发者:零学习成本

451 个 Issue 已关闭。遇到怪问题先去 Issue 列表 搜一下,大概率有人踩过。

相关推荐
程序员大阳1 小时前
副队长CSS教程(38)–transform 变换
前端·css·变换·transform
m0_738185821 小时前
Flutter 鸿蒙化实战:simple_circular_progress_bar 适配 OpenHarmony,环形进度条
flutter·华为·harmonyos·鸿蒙
jsky_studio1 小时前
鸿蒙应用图标圆角与透明像素:上架驳回的排查与修法
harmonyos·鸿蒙
程序员Sunday1 小时前
Vue 3 响应式原理是什么?Proxy、ref 和 reactive 有什么区别?
前端·javascript
mldong1 小时前
一个 npm 包,九页审批中心:Vue3 项目接上工作流引擎
前端·javascript·vue.js
架构技术专栏10 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海10 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
志尊宝11 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发
刘发财12 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源