郑州网站排名优化公司seo实战培训教程

        应用通过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: stringlist: Array<ListItem>
}interface ListItem {title: stringimg: ResourceStrintr: stringprice: numbernum?: numberfig?: 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})}//热门精选@Buildertabs1() {//用瀑布流循环输出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)}//热门品牌@Buildertabs2() {//用瀑布流循环输出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)}
}

效果图展示：