鸿蒙 harmonyOS 网络请求

        应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

接口说明

        HTTP数据请求功能主要由http模块提供。

        使用该功能需要申请ohos.permission.INTERNET权限。

第一步 ：

        在module.json5文件里面添加网络请求。

//网络请求
"requestPermissions": [{
  "name": "ohos.permission.INTERNET"
}]

第二步：

        在要使用网络模块的地方导入HTTP模块。

//导入HTTP模块

import { http } from "@kit.NetworkKit"

第三步：

        创建网络请求模块。

//创建请求模块

const req = http.createHttp()

第四步：

        创建请求网络数据方法。

//请求网络数据  
get_HotData() {
    req.request(Hot_url + '/list_hot', {
      method: http.RequestMethod.GET //数据请求为GET模式
    })
      .then(res1 => {
        let _data1 = (JSON.parse(res1.result.toString()) as HotData).data;
        this.allData = _data1.hot;
        // 将_data.hot中的title单独拿出来
        for (let i = 0; i < this.allData.length; i++) {
          this.titles.push(this.allData[i].title)
        }

        this.hotList1 = this.allData[0].list;
        this.hotList2 = this.allData[1].list;
        console.log(JSON.stringify(this.titles)); //成功拿到标题数据
        console.log(JSON.stringify(this.hotList1)); //成功拿到热门精选数据
        console.log(JSON.stringify(this.hotList2)); //成功拿到热门品牌数据


      })
  }

第五步：

        创建调用HTTP模块的方法。

 //调用HTTP请求

  aboutToAppear() {
    this.get_HotData()
  }

代码展示：

Home.ets文件内容

//网络导包
import { http } from '@kit.NetworkKit'
import { hot } from '../Hot_Recommend/Hot'

//创建网络请求
const req = http.createHttp()
//构建网络数据接口
const HTTP_url = 'https://mock.mengxuegu.com/mock/67cfd2b76e797f1d6cbe2e9b/data_exmaple'

//构建介绍数据格式的接口
interface QuanBu {
  data: DataNew
}


interface DataNew {
  banner: Array<ResourceStr>,
  menus: Array<XianXi>
}


interface XianXi {
  icon: ResourceStr,
  title: string
}


@Entry
@Component
struct Home {
  //创建状态变量用于储存数据
  @State banner_list: Array<ResourceStr> = [];
  @State menus_list: Array<XianXi> = [];
  //请求网络数据
  getHomeData() {
    req.request(HTTP_url + '/home', {
      method: http.RequestMethod.GET
    })
      .then(res => {
        let _data = (JSON.parse(res.result.toString()) as QuanBu).data;
        // 将获取的数据给状态变量
        this.banner_list = _data.banner;
        this.menus_list = _data.menus;
        //打印测试是否拿到数据
        console.log(JSON.stringify(this.banner_list))
        console.log(JSON.stringify(this.menus_list))
      })
  }
  //调用HTTP请求
  aboutToAppear() {
    this.getHomeData()

  }


  build() {
    Scroll(){
      Column(){
        //轮播图部分
        Swiper() {
          ForEach(this.banner_list, (item: ResourceStr) => {
            Image(item).width('100%').borderRadius(10)
          })
        }
        .autoPlay(true)
        .width('100%')
        .height(170)

        //列表部分
        Grid() { //使用网格布局
          ForEach(this.menus_list, (item: XianXi) => {
            GridItem() {
              Column({ space: 10 }) {
                Image(item.icon).width(50).height(40)
                Text(item.title).fontSize(14)
              }
              .width('100%')
              .height(50)
            }
          })
        }
        .margin({top:15})//给上面一点外边距
        .columnsTemplate('1fr 1fr 1fr 1fr 1fr') //5/列
        .rowsTemplate('1fr 1fr ') //2行
        .columnsGap(1)
        .rowsGap(10)
        .height(180)

        //热门部分
        Column(){
            hot()
        }
        .width('100%')

      }
      .width('90%')

    }

    .edgeEffect(EdgeEffect.Spring)
    .scrollBar(BarState.Off)
    .width('100%')
  }
}

Hot.ets 文件内容

//导入HTTP模块
import { http } from "@kit.NetworkKit"

//创建请求模块
const req = http.createHttp()
//构建网络数据接口
const Hot_url = 'https://mock.mengxuegu.com/mock/67cfd2b76e797f1d6cbe2e9b/data_exmaple'

//构建数据接口
interface HotData {
  data: Hot
}

interface Hot {
  hot: Array<HotList>
}

interface HotList {
  title: string
  list: Array<ListItem>
}

interface ListItem {
  title: string
  img: ResourceStr
  intr: string
  price: number
  num?: number
  fig?: boolean
}


@Component
export struct hot {
  //创建状态变量用于接受数据
  // 所有数据的容器
  @State allData: Array<HotList> = []
  // 定义title数组容器
  @State titles: Array<string> = []
  // 定义热门精选的列表
  @State hotList1: Array<ListItem> = []
  // 定义热门品牌的列表
  @State hotList2: Array<ListItem> = []
  //定义当前被选择的Tab按钮的索引
  @State current:number=0

//请求网络数据
  get_HotData() {
    req.request(Hot_url + '/list_hot', {
      method: http.RequestMethod.GET //数据请求为GET模式
    })
      .then(res1 => {
        let _data1 = (JSON.parse(res1.result.toString()) as HotData).data;
        this.allData = _data1.hot;
        // 将_data.hot中的title单独拿出来
        for (let i = 0; i < this.allData.length; i++) {
          this.titles.push(this.allData[i].title)
        }

        this.hotList1 = this.allData[0].list;
        this.hotList2 = this.allData[1].list;
        console.log(JSON.stringify(this.titles)); //成功拿到标题数据
        console.log(JSON.stringify(this.hotList1)); //成功拿到热门精选数据
        console.log(JSON.stringify(this.hotList2)); //成功拿到热门品牌数据


      })
  }

  //调用HTTP请求
  aboutToAppear() {
    this.get_HotData()
  }

  build() {
    Column() {
      Row({ space: 15 }) {
        Tabs() {
          TabContent() {
            this.tabs1()
          }
          .tabBar(this.TabBuilder(0,'热门精选'))

          TabContent() {
            this.tabs2()
          }
          .tabBar(this.TabBuilder(1,'热门品牌'))
        }
        .onChange((index)=>{
          this.current=index
        })


      }

    }
    .padding(5)

  }

//自定义Tabs组件
  @Builder TabBuilder(index:number ,title:string){
    Text(title).padding({bottom:10})
      .fontWeight(this.current===index?700:500)
      .fontSize(this.current===index?20:16)
      .border(this.current===index?{width:{bottom:4} ,color:Color.Red}:{width:0})

  }


  //热门精选
  @Builder
  tabs1() {
    //用瀑布流循环输出
    WaterFlow() {
      ForEach(this.hotList1, (item: ListItem) => {
        FlowItem() {
          Column({ space: 5 }) {
            Image(item.img).width(140).height(140).objectFit(ImageFit.Auto)
            Row() {
              Text(item.title).fontWeight(700).fontSize(14)
              Text('￥' + item.price.toFixed(2)).fontSize(14).fontWeight(700)

            }.width(140).justifyContent(FlexAlign.SpaceBetween)

            Text(item.intr).fontSize(14).maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).width(140)
          }.width(150).border({width:1,color:Color.Grey}).padding(5).borderRadius(5)
        }
      })

    }
    .layoutWeight(1)
    .width('100%')
    .columnsTemplate('1fr 1fr')
    .columnsGap(10)
    .rowsGap(10)
  }

  //热门品牌
  @Builder
  tabs2() {
    //用瀑布流循环输出
    WaterFlow() {
      ForEach(this.hotList2, (item: ListItem) => {
        FlowItem() {
          Column({ space: 5 }) {
            Image(item.img).width(140).height(140).objectFit(ImageFit.Auto)
            Row() {
              Text(item.title).fontWeight(700).fontSize(14)
              Text('￥' + item.price.toFixed(2)).fontSize(14).fontWeight(700)

            }.width(140).justifyContent(FlexAlign.SpaceBetween)

            Text(item.intr).fontSize(14).maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).width(140)
          }.width(150).border({width:1}).padding(5).borderRadius(5)
        }
      })

    }
    .width('100%')
    .columnsTemplate('1fr 1fr')
    .columnsGap(10)
    .rowsGap(10)

  }
}

效果图展示：