HarmonyOS APP开发—"热榜"资讯聚合App，需要用到这个库

想做一个资讯聚合 App，把科技、财经、娱乐的热点一网打尽？多源请求、统一鉴权、断点下载封面图……这些活儿，@ohos/axios一个库全包了。

📦 仓库地址：https://gitcode.com/CPF-ApplicationTPC/ohos_axios ｜ 安装：ohpm install @ohos/axios

写在前面

"热榜"这个 App 的核心诉求很简单：一次性从三四个新闻接口拉数据，合并排序后展示。听起来不复杂，但真写起来你会发现一堆麻烦事——

• 每个接口的鉴权头不一样，手写http.createHttp()每次都要重复加 header；
• 想并行请求三个源再合并，原生回调嵌套写到崩溃；
• 封面图要下载到本地缓存，还得带进度条；
• 从 Web 项目迁移过来，整个网络层几乎要推倒重写。

如果有一个库，API 和前端 axios 一模一样，拦截器、Promise、FormData 全都有——那就是@ohos/axios。

这篇文章聊什么

1. 多源并发请求——怎么用axios.all同时拉取多个新闻源
2. 统一鉴权拦截器——怎么给每个请求自动带上 Token
3. 封面图下载——怎么带进度回调把图片存到本地

第一步：安装与拦截器配置

ohpminstall@ohos/axios

给每个请求自动带上鉴权头，再统一兜底错误：

importaxios,{AxiosResponse,AxiosError}from'@ohos/axios'// 请求拦截器：自动加 Tokenaxios.interceptors.request.use((config)=>{config.headers['Authorization']='Bearer '+getToken()returnconfig})// 响应拦截器：统一处理 401axios.interceptors.response.use((response)=>response,(error:AxiosError)=>{if(error.response?.status===401){console.warn('Token 过期，跳转登录')}returnPromise.reject(error)})

这一步搞定后，后面所有请求都自动带 Token、自动兜底 401，业务代码里再也不用重复写鉴权逻辑。

第二步：多源并发拉取热榜

"热榜"的核心是同时请求多个新闻源。用axios.all并发，axios.spread展开结果：

interfaceNewsItem{title:stringsource:stringhot:numbercover:string}// 同时请求三个新闻源axios.all([axios.get<NewsItem[],AxiosResponse<NewsItem[]>,null>('https://api.a.com/tech'),axios.get<NewsItem[],AxiosResponse<NewsItem[]>,null>('https://api.b.com/finance'),axios.get<NewsItem[],AxiosResponse<NewsItem[]>,null>('https://api.c.com/entertainment'),]).then(axios.spread((techRes,financeRes,entRes)=>{// 合并三个源的数据constallNews=[...techRes.data,...financeRes.data,...entRes.data,].sort((a,b)=>b.hot-a.hot)// 按热度排序console.info(`合并${allNews.length}条热点`)}))

如果你写过前端 axios，这段代码应该一眼就懂——API 完全一致，改个 import 就能跑。

第三步：封面图下载带进度

用户点击一条新闻，下载高清封面图到本地缓存：

importfsfrom'@ohos.file.fs'constfilePath=getContext(this).cacheDir+'/cover_'+Date.now()+'.jpg'try{fs.accessSync(filePath);fs.unlinkSync(filePath)}catch(e){}axios({url:newsItem.cover,method:'get',filePath:filePath,onDownloadProgress:(e)=>{constpercent=e?.total?Math.ceil(e.loaded/e.total*100):0console.info(`封面下载:${percent}%`)},}).then((res)=>{console.info('封面已保存: '+filePath)// 用 filePath 渲染本地图片})

为什么"热榜"选了 axios？

总结

"热榜"这个场景里，@ohos/axios解决了三件事：

1. 并发请求——axios.all+axios.spread，多源合并一行代码
2. 统一鉴权——拦截器自动加 Token，401 自动跳登录
3. 文件下载——filePath+onDownloadProgress，进度条开箱即用

如果你也在做资讯类、社交类、电商类 App，只要涉及网络请求，@ohos/axios几乎是不用思考的选择。会写前端的人，5 分钟就能上手。