南平市建设局网站,网站建设需要摊销几年,铜陵app网站做营销招聘,保定百度首页优化使用方式#xff1a; 打开Harmony第三方工具仓#xff0c;找到axios#xff0c;如图#xff1a; 第三方工具仓网址#xff1a;https://ohpm.openharmony.cn/#/cn/home 在你的项目执行命令#xff1a;ohpm install ohos/axios 前提是你已经装好了ohpm #xff0c;如果没…使用方式 打开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/TeacherComponent
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)}
}到此结束有任何问题欢迎大佬留言指正
