鸿蒙API9+axios封装一个通用工具类

使用方式:
打开Harmony第三方工具仓,找到axios,如图:
在这里插入图片描述
第三方工具仓网址:https://ohpm.openharmony.cn/#/cn/home
在你的项目执行命令:ohpm install @ohos/axios
前提是你已经装好了ohpm ,如果没有安装,可以在官网找到详细的安装教程;

注意:不是在你的entry目录下,比如你的项目名称:在这里插入图片描述
在父级目录安装。

接着封装工具类,新建一个ts类:

import axios, { AxiosError, AxiosInstance, AxiosResponse, FormData, InternalAxiosRequestConfig } from '@ohos/axios'
import defaultAppManager from '@ohos.bundle.defaultAppManager';
import ResultData from './ResultData';class AxiosUtil {private instance: AxiosInstance;constructor() {this.instance = this.getInstance();this.addInterceptor(this.instance)}getInstance(): AxiosInstance {const instance = axios.create({baseURL: "http://127.0.0.1:10001/jianshen"})return instance;}addInterceptor(instance: AxiosInstance): void {instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {if (config.url.concat('login')) {// 如果是登录路径跳过,其余都需要带上tokenreturn config;} else {// 从全局缓存中取tokenconfig.headers.set("Authorization", AppStorage.Get("token"))return config;}}, (error: AxiosError) => {return Promise.reject(error);})instance.interceptors.response.use((response: AxiosResponse) => {if (response.status == 200) {return response.data;} else {return Promise.reject(response.statusText)}}, (error: AxiosError) => {return Promise.reject(error)})}httpGet(url: string, params: object = {}) {return new Promise((resolve, reject) => {this.instance.get(url, params).then(response => {resolve(response);}).catch(error => {reject(error)})})}httpPost(url: string, params: object = {}) {return new Promise((resolve, reject) => {this.instance.post(url, params).then(response => {resolve(response);}).catch(error => {reject(error)})})}httpFileUpload(url: string, formData: FormData) {return new Promise((resolve, reject) => {this.instance.post(url, formData,{headers: { 'Content-Type': 'multipart/form-data' }}).then(response => {resolve(response);}).catch(error => {reject(error)})})}
}const axiosUtil: AxiosUtil = new AxiosUtil();export default axiosUtil;

如何使用?

import axiosUtil from '../../common/AxiosUtil

然后就可以直接在你的arkts代码中使用了;例如:


// @ts-nocheckimport CommonUtil from '../../common/CommonUtil'
import ResultData from '../../common/ResultData'
import axiosUtil from '../../common/AxiosUtil'
import { Banner } from './model/Banner'
import { Teacher } from './model/Teacher'@Component
@Preview
export default struct ShowYePage {@State message: string = '首页'private swiperController: SwiperController = new SwiperController();@State bannerList: Banner[] = [];@State teacherFilterValue: string = ''@State teacherList: Teacher[] = [];pageIndex: number = 1;pageSize: number = 10;total: number = 0;arr:number[] = [1,2,3,4,5,6,7,8,9,10]build() {Scroll() {Column() {Flex({ justifyContent: FlexAlign.Center }) {// 上面的搜索栏Search({ placeholder: '支持按教练名称/标签进行查询哦~' }).searchButton("搜索").onSubmit(value => {this.teacherFilterValue = value;})}.margin({ top: 14 })// 轮播图Swiper(this.swiperController) {if (this.bannerList.length > 0) {ForEach(this.bannerList, item => {Image(item.img).height(50).width('100%')})} else {Text('占位')}}.cachedCount(2) // 设置预加载子组件个数.index(1) // 设置当前在容器中显示的子组件的索引值.autoPlay(true) // 子组件是否自动播放.interval(4000) // 使用自动播放时播放的时间间隔,单位为毫秒.indicator(true) // 是否启用导航点指示器.loop(true) //  是否开启循环.duration(1000) // 子组件切换的动画时长,单位为毫秒.itemSpace(0) // 设置子组件与子组件之间间隙.curve(Curve.Linear) // 设置Swiper的动画曲线,默认为淡入淡出曲线.borderRadius(15).margin({top:14}).height(150).onChange((index: number) => {console.info(index.toString())})// 教练列表Column() {Flex({justifyContent:FlexAlign.Start}){Text('教练列表').fontSize(24).fontWeight(500).padding({left:14})}.height(50).width('100%')List() {ForEach(this.teacherList,(item:Teacher)=>{ListItem() {TeacherComponent({teacher:item})}})}.onReachEnd(()=>{console.log('触底了')}).onReachStart(()=>{console.log('上拉了')}).width('100%').layoutWeight(1)}.borderRadius({ topLeft: 20, topRight: 20 }).margin({ top: 20 }).layoutWeight(1)}.height('100%').width('100%')}.height('100%').width('100%').padding({ left: 14, right: 14 })}aboutToAppear() {this.getBannerList();this.getTeacherList();}// 支持async和await的用法 async getBannerList() {const result: Banner[] = await axiosUtil.httpPost("banner/list");this.bannerList = result;}async getTeacherList() {const params = {pageIndex: this.pageIndex,pageSize: this.pageSize,filterValue: this.teacherFilterValue}const result = await axiosUtil.httpPost("teacher/list", params);const teacherList = result.list;this.teacherList = teacherList;this.total = result.total;}
}@Component
struct TeacherComponent {@State teacher:Teacher = null;build() {Flex({ justifyContent: FlexAlign.Center }) {// 左侧头像Flex({ justifyContent: FlexAlign.Start }) {Image(this.teacher.avatar).width('100%').height('100%').borderRadius(10)}.margin({ top: 5, bottom: 5, right: 5 }).height('95%').width('30%')// 右侧描述Flex({justifyContent:FlexAlign.Start,direction:FlexDirection.Column}) {Text(`教练名称:${this.teacher.username}`).fontSize(24).fontWeight(100).fontStyle(FontStyle.Italic)Text(`教练简介:${this.teacher.content}`).fontSize(18).fontWeight(90)Text(`标签:${this.teacher.flag}`).fontSize(14)}.margin({top:5,bottom:5,right:5}).height('100%').width('70%').onClick(()=>{// 跳转教练详情页面 带参数idconsole.log(this.teacher.id)})}.height(150).width('100%').borderRadius(20).margin({bottom:20}).backgroundColor(Color.White)}
}

到此结束,有任何问题欢迎大佬留言指正

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/279195.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chatgpt大模型基础学习

chatgpt大模型基础学习 1. 吴恩达提示工程2. 大模型说的token是什么 1. 吴恩达提示工程 知乎 https://zhuanlan.zhihu.com/p/626290417?utm_id0 中文版 https://mp.weixin.qq.com/s?__bizMzkwMjQ5MzExMg&mid2247483714&idx1&sn5e905f5ec6196f6dc2187db2a8618f02&…

快速从0-1完成聊天室开发——环信ChatroomUIKit功能详解

聊天室是当下泛娱乐社交应用中最经典的玩法,通过调用环信的 IM SDK 接口,可以快速创建聊天室。如果想根据自己业务需求对聊天室应用的 UI界面、弹幕消息、礼物打赏系统等进行自定义设计,最高效的方式则是使用环信的 ChatroomUIKit 。 文档地址…

母亲的奶牛(bfs)

农夫约翰有三个容量分别为 A , B , C A,B,C A,B,C 升的挤奶桶。 最开始桶 A A A 和桶 B B B 都是空的,而桶 C C C 里装满了牛奶。 有时,约翰会将牛奶从一个桶倒到另一个桶中,直到被倒入牛奶的桶满了或者倒出牛奶的桶空了为止。 这一过…

基于YOLOv8的火焰烟雾实时检测系统【训练和系统源码+Pyside6+数据集+包运行】

✨目录 一、系统概述和展示🎄1.1 摘要 🎈 二、一站式使用教程🎄三、YOLOv8原理剖析🎄3.1 YOLOv8背景和技术原理🎈 四、模型训练、评估和推理🎄4.1 数据集介绍🎈4.2 模型训练🎈4.3 结…

【Swing】Java Swing实现省市区选择编辑器

【Swing】Java Swing实现省市区选择编辑器 1.需求描述2.需求实现3.效果展示 系统:Win10 JDK:1.8.0_351 IDEA:2022.3.3 1.需求描述 在公司的一个 Swing 的项目上需要实现一个选择省市区的编辑器,这还是第一次做这种编辑器&#xf…

慢sql优化

1.避免使用select *,而是明确列出需要的列, 2.小表驱动大表,in适用于左边大表,右边小表。 exists适用于左边小表,右边大表。 3.批量操作:如果每次插入数据库数据,都要连接一次数据库&#xf…

Java-SpringAop 编程式事物实现

SpringAop 编程式事物实现 1. 数据库事物特性 原子性 多个数据库操作是不可分割的,只有所有的操作都执行成功,事物才能被提交;只要有一个操作执行失败,那么所有的操作都要回滚,数据库状态必须回复到操作之前的状态 …

linux 安装常用软件

文件传输工具 sudo yum install –y lrzsz vim编辑器 sudo yum install -y vimDNS 查询 sudo yum install bind-utils用法可以参考文章 《掌握 DNS 查询技巧,dig 命令基本用法》 net-tools包 yum install net-tools -y简单用法: # 查看端口占用情况…

实现HBase表和RDB表的转化(附Java源码资源)

实现HBase表和RDB表的转化 一、引入 转化为HBase表的三大来源:RDB Table、Client API、Files 如何构造通用性的代码模板实现向HBase表的转换,是一个值得考虑的问题。这篇文章着重讲解RDB表向HBase表的转换。 首先,我们需要分别构造rdb和hba…

ModbusTCP转Profinet网关高低字节交换切换

背景:在现场设备与设备通迅之间通常涉及到从一种字节序(大端或小端)转换到另一种字节序。大端字节序是指高位字节存储在高地址处,而小端字节序是指低位字节存储在低地址处。在不动原有程序而又不想或不能添加程序下可选用ModbusTC…

一种动态联动的实现方法

安防领域中的联动规则 有安防领域相关的开发经历的人知道,IPCamera可以配置使能“侦测”功能,并且指定仅针对图像传感器的某个区载进行侦测。除了基本的“移动侦测"外,侦测的功能点还有细化的类别,如人员侦测、车辆侦测、烟…

Springboot+Redis:实现缓存 减少对数据库的压力

🎉🎉欢迎光临,终于等到你啦🎉🎉 🏅我是苏泽,一位对技术充满热情的探索者和分享者。🚀🚀 🌟持续更新的专栏Redis实战与进阶 本专栏讲解Redis从原理到实践 …

nmcli --help(nmcli -h)nmcli文档、nmcli手册

文章目录 nmcli --helpOPTION解释OBJECT解释1. g[eneral]:查看NetworkManager的状态2. n[etworking]:启用或禁用网络3. r[adio]:查看无线电状态(例如,Wi-Fi)4. c[onnection]:列出所有的网络连接…

【Linux】进程优先级

🌎进程的优先级 文章目录: 进程状态 优先级相关       什么是优先级       为什么要有优先级       进程的优先级 调整进程优先级       调整优先级       优先级极限测试 Linux的调度与切换 总结 前言: 进程…

Apache Doris 2.1 核心特性 Variant 数据类型技术深度解析

在最新发布的 Apache Doris 2.1 新版本中,我们引入了全新的数据类型 Variant,对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列,彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。为了让大家快速…

MATLAB图形绘制

一,二维图像绘制 最基础的二维图形绘制方法:plot -plot命令自动打开一个图形窗口Figure;用直线连接相邻两数据点来绘制图形 -根据图形坐标大小自动缩扩坐标轴,将数据标尺及单位标注自动加到两个坐标轴上,可自定坐标 轴&#x…

group by和min、max函数一起使用

原始数据 查询每科的最高分数 -- 查询每科最高分数 select stuId,classId,stuName,max(score) from student_score group by classId 错误的结果 这个显然不是对的,或者说不是我们想要的结果, 我们想要的结果是 原因是什么呢?我们知道使用…

AtomoVideo:AIGC赋能下的电商视频动效生成

✍🏻 本文作者:凌潼、依竹、桅桔、逾溪 1. 概述 当今电商领域,内容营销的形式正日趋多样化,视频内容以其生动鲜明的视觉体验和迅捷高效的信息传播能力,为商家创造了新的机遇。消费者对视频内容的偏好驱动了视频创意供给…

我的自建博客之旅04之Halo

我的自建博客之旅04之Halo Halo是我无意间发现的一款博客框架,如果你讨厌Hexo,Vuepress等静态框架本地编辑,构建部署等方式,如果你想要一款一次搭建,前台是博客,后台是文章维护,并且支持各种定制化折腾的博客框架,可能Halo会比较适合你。 因为我个人还是比较偏技术,…

C语言 扫雷游戏

写了这么长时间的关于C语言的基础知识,相信大家已经学会了使用C语言书写一些基础的代码,上次还编写了三子棋游戏的代码,这次我将编写一个基础版的扫雷游戏。 首先,创建三个文件,两个源文件,一个头文件&…