资讯动态

HarmonyOS APP开发---“热榜“资讯聚合App,需要用到这个库

发布时间:2026/8/14 2:53:50 来源:尧图企业网站定制
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。这篇文章聊什么多源并发请求——怎么用axios.all同时拉取多个新闻源统一鉴权拦截器——怎么给每个请求自动带上 Token封面图下载——怎么带进度回调把图片存到本地App 启动axios.all 并发请求源A: 科技热榜源B: 财经热榜源C: 娱乐热榜拦截器自动加 Token合并 排序渲染信息流点击下载封面axios 下载 进度第一步安装与拦截器配置ohpminstallohos/axios给每个请求自动带上鉴权头再统一兜底错误importaxios,{AxiosResponse,AxiosError}fromohos/axios// 请求拦截器自动加 Tokenaxios.interceptors.request.use((config){config.headers[Authorization]Bearer getToken()returnconfig})// 响应拦截器统一处理 401axios.interceptors.response.use((response)response,(error:AxiosError){if(error.response?.status401){console.warn(Token 过期跳转登录)}returnPromise.reject(error)})这一步搞定后后面所有请求都自动带 Token、自动兜底 401业务代码里再也不用重复写鉴权逻辑。第二步多源并发拉取热榜热榜的核心是同时请求多个新闻源。用axios.all并发axios.spread展开结果interfaceNewsItem{title:stringsource:stringhot:numbercover:string}// 同时请求三个新闻源axios.all([axios.getNewsItem[],AxiosResponseNewsItem[],null(https://api.a.com/tech),axios.getNewsItem[],AxiosResponseNewsItem[],null(https://api.b.com/finance),axios.getNewsItem[],AxiosResponseNewsItem[],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 就能跑。第三步封面图下载带进度用户点击一条新闻下载高清封面图到本地缓存importfsfromohos.file.fsconstfilePathgetContext(this).cacheDir/cover_Date.now().jpgtry{fs.accessSync(filePath);fs.unlinkSync(filePath)}catch(e){}axios({url:newsItem.cover,method:get,filePath:filePath,onDownloadProgress:(e){constpercente?.total?Math.ceil(e.loaded/e.total*100):0console.info(封面下载:${percent}%)},}).then((res){console.info(封面已保存: filePath)// 用 filePath 渲染本地图片})为什么热榜选了 axios需求原生 httpohos/axios多源并发手写 Promise.all 回调axios.all一行搞定统一鉴权每次手动加 header拦截器自动加错误兜底每个请求各写 catch响应拦截器统一处理文件下载手写流式处理filePath 进度回调Web 迁移全部重写改个 import 即可总结热榜这个场景里ohos/axios解决了三件事并发请求——axios.allaxios.spread多源合并一行代码统一鉴权——拦截器自动加 Token401 自动跳登录文件下载——filePathonDownloadProgress进度条开箱即用如果你也在做资讯类、社交类、电商类 App只要涉及网络请求ohos/axios几乎是不用思考的选择。会写前端的人5 分钟就能上手。

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价