鸿蒙开发深入浅出02（封装Axios请求、渲染Swiper）

1、效果展示

2、封装Http请求

2.1 ets/models/HttpModel.ts

export interface AnyObject {
  [key: string]: any
}

2.2 ets/utils/http/http.ts

import axios from '@ohos/axios';
import { promptAction } from '@kit.ArkUI';
import { AnyObject } from '../../models/HttpModel';

const request = axios.create({
  // baseURL: "http://127.0.0.1:6060",
  // 真机运行需要替换为 cmd 中 ipconfig 的地址
  baseURL: "http://192.168.145.1:6060", 
  timeout: 30000
})

// 请求拦截
request.interceptors.request.use(
  (config) => {
    // 将来会添加 token 参数
    return config;
  }
)

// 响应拦截
request.interceptors.response.use(
  (response) => {
    if (response.data.code === 200) {
      return response.data.data;
    } else {
      // 错误提示
      promptAction.showToast(response.data.message);
      return Promise.reject(response.data.message);
    }
  },
  (error) => {
    // 错误提示
    promptAction.showToast(error.message);
    return Promise.reject(error.message);
  }
)

// 封装请求
export default class Http {
  get<T>(url: string, params?: AnyObject) {
    return request.get<any, T>(url, {
      params
    })
  }

  post<T>(url: string, data?: AnyObject) {
    return request.post<any, T>(url, data)
  }

  put<T>(url: string, data?: AnyObject) {
    return request.put<any, T>(url, data)
  }

  delete<T>(url: string, params?: AnyObject) {
    return request.delete<any, T>(url, {
      params
    })
  }
}

2.3 ets/utils/http/index.ts

import Http from './http';

export const http = new Http();

3、使用http请求

3.1 ets/models/HomeData.ts

export interface IHomeData {
  "bannerList": IBannerList
  "navList": INavList
  "tileList": ITileList
  "planList": IPlanList
  "adPicture": string
}

// 计划列表类型
export interface IPlanItem {
  "id": number
  "imageURL": string
}

export type IPlanList = IPlanItem[]

// 瓷片列表类型
export interface ITileItem {
  "id": number
  "imageURL": string
  "title": string
  "sub_title": string
}

export type ITileList = ITileItem[]

// 导航列表类型
export interface INavItem {
  "id": number
  "title": string
  "imageURL": string
}

export type INavList = INavItem[]

// 轮播图类型
export interface IBannerItem {
  "id": number
  "name": string
  "imageURL": string
}

export type IBannerList = IBannerItem[]

3.2 ets/api/home.ts

import { http } from '../utils/http'
import type { IHomeData } from '../models/HomeData'

// 获取首页页面数据
export const getHomeDataApi = () => {
  return http.get<IHomeData>('/home/info')
}

3.3 ets/pages/Home.ets

import { getHomeDataApi } from "../api/home"
import { IBannerList } from "../models/HomeData"
import SwiperLayout from '../views/Home/SwiperLayout'

/**
 * MyHouseApplication #项目的名称
 * Home.ets #文件名称
 * Created by zhong ON 2025/2/23 #作者及添加日期
 */
@Component
export default struct Home {
  @State bannerList: IBannerList = [];
  // 获取首页数据的函数
  getHomeData = async () => {
    const result = await getHomeDataApi();
    this.bannerList = result.bannerList;
  }

  // 生命周期函数，初始化页面时触发
  aboutToAppear(): void {
    this.getHomeData();
  }

  build() {

    Scroll() {
      Column() {
        SwiperLayout({ bannerList: this.bannerList });
      }.width('100%')

    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .align(Alignment.TopStart)
  }
}

3.4 ets/views/Home/SwiperLayout.ets

/**
 * MyHouseApplication #项目的名称
 * SwiperLayout.ets #文件名称
 * Created by zhong ON 2025/2/23 #作者及添加日期
 */
import { IBannerItem, IBannerList } from "../../models/HomeData"

@Component
export default struct SwiperLayout {
  @Prop bannerList: IBannerList;

  build() {
    Swiper() {
      ForEach(this.bannerList, (banner: IBannerItem) => {
        Image(banner.imageURL).width('100%')
          .height('100%')
          .objectFit(ImageFit.Fill)
      }, (banner: IBannerItem) => banner.id + '')
    }.width('100%')
    .height(211 - 36)
    .indicator(
      new DotIndicator()
        .color($r('app.color.indicator_color'))
        .selectedColor($r('app.color.indicator_active_color'))
    )
  }
}