鸿蒙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,一经查实,立即删除!

相关文章

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

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

考研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…

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

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

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

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

运维专题.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;那么…

软考高级:需求变更管理过程概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

C++学习随笔(4)——类和对象的初探

本章我们来初步学习一下C中的类和对象&#xff01; 目录 1.类的引入 2.类的定义 类的两种定义方式&#xff1a; 3.类的访问限定符及封装 3.1 访问限定符 3.2 封装 4.类的作用域 5.类的实例化 6.类对象模型 6.1 如何计算类对象的大小 6.2 类对象的存储方式猜测 6.3 …

这个学习Python的神仙网站,后悔没早点发现

Python 作为时下最流行的编程语言&#xff0c;很多初学者都将它作为自学编程的首选。不管是有编程经验的开发者&#xff0c;还是新手小白&#xff0c;在这个 AIGC 时代&#xff0c; Python 都可以带你探索新世界。 入门 Python 绝非难事&#xff0c;但如何让自己坚持学下去是如…

用虚拟机安装win10超详细教程。

前言&#xff1a;安装中有任何疑问&#xff0c;可以在评论区提问&#xff0c;博主身经百战会快速解答小伙伴们的疑问 BT、迅雷下载win10镜像&#xff08;首先要下载win10的镜像&#xff09;&#xff1a;ed2k://|file|cn_windows_10_business_editions_version_1903_updated_sep…

Jmeter---跨越线程组传值

1. 创建两个线程组&#xff0c;并添加请求&#xff0c;设置变量并将其设置为全局变量 2. 设置全局变量&#xff1a;使用函数助手的 setProperty 函数&#xff0c;填写相应内容 3. 设置全局变量&#xff1a;创建一个beanShell&#xff0c;把函数生成的内容粘贴过来 4. 获取全局变…

六 超级数据查看器 讲解稿 详情1 概述

六 超级数据查看器 讲解稿 详情1 概述 点此此处 以新界面 打开B站 当前视频教程 APP下载地址 百度 下载地址 ​ 讲解稿全文&#xff1a; 大家好&#xff0c;今天我们讲解一下超级数据查看器详情界面。由于内容较多&#xff0c;讲解要分为7集&#xff0c;这是第一集 首…

【leetcode热题】寻找旋转排序数组中的最小值 II

难度&#xff1a; 困难通过率&#xff1a; 38.7%题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转。 ( 例如&#xff0c;数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] )。 请找出其中最小的…

FastWiki v0.1.0发布!新增超多功能

FastWiki 发布 v0.1.0 https://github.com/239573049/fast-wiki/releases/tag/v0.1.0 更新日志 兼容OpenAI接口格式删除Blazor版本UI删除useEffect,解决可能存在问题的bug修复对话可以看到所有对话Merge branch ‘master’ of https://gitee.com/hejiale010426/fast-wiki更新…

搭建Hadoop3.x完全分布式集群

零、资源准备 虚拟机相关&#xff1a; VMware workstation 16&#xff1a;虚拟机 > vmware_177981.zipCentOS Stream 9&#xff1a;虚拟机 > CentOS-Stream-9-latest-x86_64-dvd1.iso Hadoop相关 jdk1.8&#xff1a;JDK > jdk-8u261-linux-x64.tar.gzHadoop 3.3.6&am…