鸿蒙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.mzph.cn/news/743274.shtml

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

相关文章

【MySQL 系列】MySQL 函数篇

MySQL 提供了广泛的函数,用于处理各种数据类型,包括数值、字符串、日期和时间等。这些函数可以帮助你进行复杂的数据操作,改善数据查询的效率和灵活性。 文章目录 1、MySQL 函数介绍1.1、MySQL 函数简介2.1、MySQL 函数分类 2、MySQL 数学函数…

最适合Oracle数据库的Linux操作系统?

先声明:以下观点仅供参考。我只引用网上的一些观点,包括官网等。 Oracle数据库认证的Linux操作系统 最近老被问到Oracle Linux免费吗?因为用户需要安装Oracle数据库,面临选择操作系统的问题。 首先,Oracle数据库 19…

一、图的基本概念

文章目录 1、无向图和有向图2、图的表示2.1 图解表示2.2 图的邻接矩阵表示2.2 图的邻接表表示 3、子图4、度5、正则图6、同构7、路,圈和连通图7.1 连通图的判定条件7.2 圈的判定条件 8、补图和双图8.1 补图8.2 双图 9、欧拉图10、哈密顿图10.1 哈密顿图判定的充分条…

考研C语言复习进阶(2)

目录 1. 字符指针 2. 指针数组 3. 数组指针 3.1 数组指针的定义 3.2 &数组名VS数组名 4. 函数指针 5. 函数指针数组 6. 指向函数指针数组的指针 7. 回调函数 8.三步辗转法 9. 指针和数组笔试题解析 10. 指针笔试题 指针的主题,我们在初级阶段的《指…

工程师日常:六大茶类--乌龙茶

工程师日常:六大茶类–乌龙茶 乌龙茶的产区主要分布在福建、广东和台湾。 福建是乌龙茶的发源地和最大产区。所产乌龙茶按地域分为闽北乌龙、闽南乌龙。那么主要的代表性的产品分别为武夷岩茶和安溪铁观音。 广东作为乌龙茶另一重要产区,那么主要地域…

【小沐学C#】C#文件读写方式汇总

文章目录 1、简介2、相关类介绍3、代码示例3.1 FileStream(流文件)3.2 StreamReader / StreamWriter (文本文件)3.2.1 StreamReader3.2.2 StreamWriter 3.3 BinaryReader / BinaryWriter (二进制文件)3.3.1…

地理数据 vs. 3D数据

在表示我们周围的物理世界时,地理空间数据和 3D 建筑数据是两个最常见的选择。 他们在各个行业和项目中发挥着至关重要的作用。 从构建数字孪生到可视化城市景观和创建沉浸式应用程序。 尽管地理空间和 3D 建筑数据有相似之处,但它们不可互换。 虽然地…

国投用什么档案管理系统好

国投适合使用综合档案管理系统。这是因为国投通常规模较大,涉及的业务范围也比较广泛,包括行政管理、财务管理、人力资源管理等。 玖拓智能综合档案管理系统能够整合这些不同部门的档案管理需求,提供统一的档案管理平台,方便国投内…

蓝桥杯 填空 卡片

蓝桥杯 填空题 卡片 解题思路&#xff1a; 我们只需要消耗完卡片的个数即可。 代码示例&#xff1a; #include<bits/stdc.h> using namespace std; int a[10]; bool isEnd(){for(int i0;i<10;i){if(a[i]-1)return false;}return true; } bool getN(int x){while(x){i…

react简单实现获取dom元素

家人们 今天从老杨那里又学到新东西了&#xff01; 赶紧来看看吧 第一个方法&#xff1a; // 使用ref声明一个变量const tel useRef(null)const pass useRef(null) 再给input 内标签属性里面绑定 ref{变量名} <inputclassName{style.inputs}type"text"placeh…

SQLiteC/C++接口详细介绍之sqlite3类(五)

快速跳转文章列表&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;四&#xff09; 下一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;六&#xff09;&#xff08;未发表&#xff09; 14.sqlite3_busy_handle…

4、ETAS INCA标定系统基本操作

目录 一、标定开始操作 二、Working Page & Reference Page 三、Memory Pages存储页 一、标定开始操作 使用实验环境进行上传/下载标定数据,并观察和编辑标定数据 1. 上传/下载标定数据和代码 2. 添加测量变量 3. 添加标定变量 4. 配置测量变量 5. 建立存储触发

2024年云仓酒庄:店中店增项新模式,开启葡萄酒文化新篇章

2024云仓酒庄&#xff1a;店中店增项新模式&#xff0c;开启葡萄酒文化新篇章 在葡萄酒行业蓬勃发展的今天&#xff0c;云仓酒庄以其独特的经营模式和创新思维&#xff0c;在市场中脱颖而出。2024年&#xff0c;云仓酒庄继续深化其战略布局&#xff0c;不仅在多地开设酒庄实体…

docker实战(1)

docker搭建mysql 一,搭建docker环境 二,Docker安装mysql 1,查看mysql版本:docker search mysql 2,安装指定mysql版本或安装最新版本 docker pull mysql:5.8 或 docker pull mysql:latest 3,查看本地镜像中是否已安装好mysql镜像:docker images 4,运行容器启动my…

运维专题.Docker+Nginx服务器的SSL证书安装

运维专题 DockerNginx服务器的SSL证书安装 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/q…

【C++】—— 代理模式

目录 &#xff08;一&#xff09;什么是代理模式 &#xff08;二&#xff09;为什么使用代理模式 &#xff08;三&#xff09;代理模式实现步奏 &#xff08;四&#xff09;代码示例 &#xff08;五&#xff09;代理模式优缺点 &#xff08;一&#xff09;什么是代理模式 …

备考2025年AMC8竞赛:吃透2000-2024年600道真题(免费赠送真题)

我们继续来随机看五道AMC8的真题和解析&#xff0c;根据实践经验&#xff0c;对于想了解或者加AMC8美国数学竞赛的孩子来说&#xff0c;吃透AMC8历年真题是备考最科学、最有效的方法之一。 即使不参加AMC8竞赛&#xff0c;吃透了历年真题600道和背后的知识体系&#xff0c;那么…

用 C 语言模拟 Rust 的 Box 类型

在 Rust 中&#xff0c;Box<T> 是一个堆上分配的指针类型&#xff0c;用于在堆上存储值而不是栈上。在 C 语言中&#xff0c;没有直接对应于 Rust 的 Box<T> 的类型&#xff0c;但我们可以使用指针和动态内存分配来模拟这种行为。 下面是一个简单的示例&#xff0…

76. 最小覆盖子串-力扣hot100(C++)

76. 最小覆盖子串s 初始化和特判 //本题做题思想 //从头开始&#xff0c;首先找到一个包含所有字母的字串&#xff0c;将i移动到包含字串字母的位置&#xff0c;然后更新长度和字符串ans后&#xff0c; //i的位置加1&#xff0c;j的位置也加1&#xff0c;从新开始上面的流程&…

【Docker】常用命令 docker run

文章目录 什么是docker run命令基本用法常用选项-d&#xff1a;后台运行--name&#xff1a;指定容器名称-p&#xff1a;端口映射-v&#xff1a;挂载数据卷-e&#xff1a;设置环境变量 实际示例运行一个简单的Web服务器运行一个交互式Shell 总结 在Docker中&#xff0c; docker…