鸿蒙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')) {
      	// 如果是登录路径跳过,其余都需要带上token
        return config;
      } else {
      	// 从全局缓存中取token
        config.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-nocheck

import 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(()=>{
        // 跳转教练详情页面 带参数id
        console.log(this.teacher.id)
      })
    }
    .height(150)
    .width('100%')
    .borderRadius(20)
    .margin({bottom:20})
    .backgroundColor(Color.White)
  }
}

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Flutter 面试题】怎么理解Flutter的Isolate?并发编程

【Flutter 面试题】怎么理解Flutter的Isolate?并发编程 文章目录 写在前面解答补充说明完整代码示例说明 写在前面 🙋 关于我 ,小雨青年 👉 CSDN博客专家,GitChat专栏作者,阿里云社区专家博主,…

Qt-QPainter drawText方法不同重载之间的区别

QPainter类的drawText方法有如下重载: void drawText(const QPointF &position, const QString &text) void drawText(const QPoint &position, const QString &text) void drawText(int x, int y, const QString &text) void drawText(co…

解决尚品甄选验证码图片无法显示bug

按照他的视频要求去做发现图片无法正常显示,通过查看浏览器网络错误,发现请求验证码的网址是重叠的http://localhost:3001/admin/system/index/login/admin/system/index/generateValidateCode是这样的,说明baseUrl是/admin/system/index/log…

【Python如何与电脑玩石头剪刀布游戏】

1、石头剪刀布Python代码如下: import random while True:a random.randint(0, 2)b int(input("请输入一个数字(0石头, 1剪刀, 2布): "))c [石头, 剪刀, 布]if b ! 0 and b ! 1 and b ! 2:print("傻子,你出错了…

Cisco Packet Tracer模拟器实现路由器的路由配置及网络的安全配置

1. 内容 1. 配置路由器实现多个不同网络间的通信,路由器提供的路由协议包括静态路由协议、RIP动态路由、OSPF动态路由协议等等,训练内容包括路由器的静态路由配置、路由器的RIP动态路由配置、路由器的OSPF动态路由配置以及路由器的路由重分布配置。 2.…

测试环境搭建整套大数据系统(十一:docker部署superset,无密码登录嵌入html)

一:安装docker 参考文档 https://blog.csdn.net/weixin_43446246/article/details/136554243 二:安装superset 下载镜像。 拉取镜像(docker pull amancevice/superset) 查看镜像是否下载完成(docker images&#xf…

Tomcat目录结构

文章目录 binconfliblogswebapp bin 存放tomcat的可执行程序 从上图可以看出bin中的文件主要是两种文件,一种是.bat一种是.sh .bat:主要用于windows .sh:主要用于linux .bat文件是Windows操作系统中的批处理文件。它是一种简单的文本文件,其中包含了一…

java内部类的作用与优缺点

一、前言 很久没看到java内部类了,今天在审查代码时候,发现了java内部类,主要是内部类还嵌套了内部类。于是记录一下 二、java内部类的作用与优缺点 Java内部类,也称为嵌套类,是定义在另一个类(外部类&am…

pycharm 历史版本下载地址

pycharm 历史版本下载地址 老版本能用就行,不需要搞最新的,当然了,有些小伙伴就是喜欢新的(最先吃螃蟹) 博主就不搞最新了,哈哈 上菜: https://www.jetbrains.com/pycharm/download/other.html…

Python (用户登录、身份归属地查询添加异常处理、绘制多角星、电影信息提取)

任务一:用户登录 登录系统通常分为普通用户与管理员权限,在用户登录系统时,可以根据自身权限进行选择登录。本任务要求实现一个用户登录的程序,该程序分为管理员用户与普通用户,其中管理员账号密码在程序中设定&#…

rt-thread之sal+lwip的tcp客户端示例记录(接收非阻塞)

示例记录 #include "lwip_test.h" #include "lwip/sockets.h" #include "netdev.h"#define DBG_ENABLE #define DBG_TAG "lwip.tst" #define DBG_LVL DBG_LOG#include <rtdbg.h>#define SERVER_PORT 8080 #define SERVER_HOST …

JAVA的编译过程

1.通过使用 javac.exe 对 xxx.java文件进行编译&#xff0c;生成相应的 xxx.class&#xff08;字节码文件&#xff09; 2.使用 java.exe 对 xxx.class 进行相应解码&#xff0c;并将结果送给JVM&#xff08;java虚拟机&#xff09;中的类装载器 3. 字节码验证器会判断代码类…

php双端交易所

php双端交易所&#xff0c;如需联系 完美修复版&#xff0c;带所有 PHP双端交易所完美版: PHP双端交易所完美版,带前端源码https://gitee.com/ycsw/ex.git

TikTok直播畅通无阻,海外直播专线打造稳定流畅的网络环境

随着tiktok的爆火&#xff0c;越来越多的商家开始尝试在tiktok进行直播。然而&#xff0c;由于距离长、横跨大陆海洋等原因&#xff0c;在海外直播时网络问题十分突出&#xff0c;例如冻结和传输故障&#xff0c;给观众带来不良体验。为了解决这一问题&#xff0c;tiktok海外直…

R语言系列4——R语言统计分析基础

目录 写在开头1. 描述性统计分析1.1 描述性统计分析的定义与重要性1.2 R语言中的描述性统计分析功能1.3 常用的描述性统计量及其在R中的计算方法1.4 使用R语言进行描述性统计分析的实际示例1.5 描述性统计分析的局限性和应用注意事项 2. 假设检验基础2.1. 假设检验的基本原理和…

【UE5】非持枪站姿移动混合空间

项目资源文末百度网盘自取 创建角色在非持枪状态且站立移动的动画混合空间 在Character文件夹中创建文件夹&#xff0c;命名为BlendSpace 所有混合空间文件都放到这个文件夹中 在BlendSpace文件夹中单击右键&#xff0c;选择动画(Animation)中的混合空间(BlendSpace) 选择SK…

学习网络编程No.13【网络层IP协议理解】

引言&#xff1a; 北京时间&#xff1a;2024/3/5/8:38&#xff0c;早六加早八又是生不如死的一天&#xff0c;不过好在喝两口热水提口气手指还能跳动。当然起关键性作用的还是思维跟上了课程脑袋较为清晰&#xff0c;假如是听学校老师在哪里磨过来磨过去&#xff0c;那我倒头就…

No7 蓝桥杯单片机实践之定时器的应用

1 回顾&#xff1a; 程序编写结构还是中断函数结构的写法&#xff0c;只是由于定时器涉及的寄存器较多&#xff0c;中断初始条件函数中条件也就随之增多。 void 函数名&#xff08;&#xff09; { 主要写一些初始化变量。&#xff08;基本的就是3.1~3.5所涉及的寄存器的初…

Python之装饰器

一&#xff1a;作用 在函数名以及函数体不改变的前提下&#xff0c;给一个函数附加一些额外代码 二、语法 三、举例子 两个功能函数 test1&#xff0c; test2 遵循 “开放封闭原则”&#xff0c; 已经写好的代码&#xff0c;尽可能不要修改。 如果想要新增功能&#xff0c;…

数据结构知识点总结00-知识点目录

专栏主页&#xff1a; 数据结构算法程序设计基础C语言知识点总结https://blog.csdn.net/seeker1994/category_12585732.html C语言知识点总结00-C语言知识点目录 最优算法100例00-最优算法100例目录 ...... 数据结构知识点目录 要求&#xff1a; &#xff08;1&#xff…
最新文章