鸿蒙 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: 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)}
}

效果图展示：

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ICMP 协议深度解析

ICMP 协议深度解析

ICMP 协议深度解析 一、协议定位与核心作用 ICMP&#xff08;互联网控制报文协议&#xff09;是IP协议体系的"哨兵系统"&#xff0c;专用于网络状态监控与异常反馈。其核心价值体现在&#xff1a; 轻量级控制&#xff1a;仅传递关键状态信息&#xff0c;不承载业务…
阅读更多...
【设计模式】模板模式

【设计模式】模板模式

简介 假设你要冲泡咖啡和茶&#xff0c;两者的流程相似但部分步骤不同&#xff1a; 烧水&#xff08;公共步骤&#xff09;加入主材料&#xff08;咖啡粉/茶叶&#xff09;添加调料&#xff08;糖/牛奶&#xff09;→ 可选步骤倒进杯子&#xff08;公共步骤&#xff09; 模板…
阅读更多...
【学Rust写CAD】37 premultiply 函数(argb.rs补充方法）

【学Rust写CAD】37 premultiply 函数(argb.rs补充方法）

源码 fn premultiply(self) -> Argb {//预乘// This could be optimized by using SWARlet a self.alpha32();if a < 255 {Argb::new32(a, div255(self.red32() * a), div255(self.green32() * a),div255(self.blue32() * a))}else{self}源码分析 这个函数实现了颜色预…
阅读更多...
Redis-一般操作

Redis-一般操作

1.redis命令CRUG网站 2.string 、 hash 、list 、 set 、zset 3.4种应用(对象存储、累加器、分布式锁、位运算) 1.redis命令CRUG网站 2string 、 hash 、list 、 set 、zset 3.4种应用(对象存储、累加器、分布式锁、位运算) 1.redis命令CRUG网站 #1.启动redis redis-server r…
阅读更多...
Vue 基础语法介绍

Vue 基础语法介绍

Vue.js 是一个渐进式的 JavaScript 框架&#xff0c;广泛用于构建用户界面和单页应用&#xff08;SPA&#xff09;。它的核心思想是通过简单的模板语法和响应式的数据绑定机制&#xff0c;使得开发者能够更直观地创建动态交互的网页。本文将介绍 Vue.js 的一些基础语法&#xf…
阅读更多...
Flask + Pear Admin Layui 快速开发管理后台

Flask + Pear Admin Layui 快速开发管理后台

框架介绍 Flask 就不用过多介绍了, Pear Admin Layui 是基于 Layui 的一套管理后台前端开源模板, 主打一个开箱即用, 对于不喜欢 React/Vue 等这些还需要大量学习成本的前端开发者来说, 可以说是相当友好了. 项目官网: https://gitee.com/pear-admin/pear-admin-layui 项目的作…
阅读更多...
git push

git push

在 git push 命令中&#xff0c;分支名称的顺序和含义非常重要。其基本格式如下&#xff1a; git push <remote> <local_branch>:<remote_branch>各部分解释 <remote>&#xff1a;远程仓库的名称&#xff08;如 origin&#xff09;。<local_branc…
阅读更多...
wordpress 利用 All-in-One WP Migration全站转移

wordpress 利用 All-in-One WP Migration全站转移

导出导入站点 在插件中查询 All-in-One WP Migration备份并导出全站数据 导入 注意事项&#xff1a; 1.导入部分限制50MB 宝塔解决方案&#xff0c;其他类似&#xff0c;修改php.ini配置文件即可 2. 全站转移需要修改域名 3. 大文件版本&#xff0c;大于1G的可以参考我的…
阅读更多...
蓝桥杯补题

蓝桥杯补题

方法技巧&#xff1a; 1.进行循环暴力骗分&#xff0c;然后每一层的初始进行判断&#xff0c;如果已经不满足题意了&#xff0c;那么久直接continue&#xff0c;后面的循环就不用浪费时间了。我们可以把题目所给的等式&#xff0c;比如说有四个未知量&#xff0c;那么我们可以用…
阅读更多...
MySQL：锁

MySQL：锁

按粒度分类 全局锁 含义&#xff1a;全局锁会锁定整个数据库实例&#xff0c;在其生效期间&#xff0c;其他事务无法对数据库进行任何读写操作。常用于数据迁移、数据备份场景。 表级锁 表锁&#xff1a;是对整张表进行锁定的机制。实现逻辑简单&#xff0c;加锁和释放锁速…
阅读更多...
数字政府政务服务领域智能化应用解决方案

数字政府政务服务领域智能化应用解决方案

数字政府政务服务领域智能化应用 解决方案 一、方案背景 在数字经济蓬勃发展的当下&#xff0c;数字化转型已成为政府提升治理能力、优化公共服务、增强竞争力的关键路径。党的十九届四中全会明确提出 “推进数字政府建设”&#xff0c;这为政府的数字化转型指明了方向。 随…
阅读更多...
03--Deepseek服务器部署与cjson解析

03--Deepseek服务器部署与cjson解析

一、ollama部署deepseek模型 1、Ollama 是一个开源的本地大语言模型运行框架&#xff0c;专为在本地机器上便捷部署和运行大型语言模型&#xff08;LLM&#xff09;而设计。 Ollama 教程&#xff1a;从 0 到 1 全面指南 教程【全文两万字保姆级详细讲解】 -CSDN博客 1.下载o…
阅读更多...
栈(算法)

栈(算法)

在 C 里&#xff0c;栈是一种遵循后进先出&#xff08;LIFO&#xff09;原则的数据结构。下面从多个方面为你介绍 C 栈&#xff1a; 1. 使用标准库中的std::stack C 标准库提供了std::stack容器适配器&#xff0c;能方便地实现栈的功能。以下是简单示例&#xff1a; cpp #in…
阅读更多...
UniApp 页面布局自定义头部导航

UniApp 页面布局自定义头部导航

动态计算头部高度与内容偏移量&#xff1a;实现 UniApp 页面布局的精准适配 在移动端应用开发中&#xff0c;页面布局的精准适配是一个关键问题。尤其是在 UniApp 中&#xff0c;不同设备的屏幕尺寸、状态栏高度以及头部布局的差异&#xff0c;可能导致页面内容错位或显示不全…
阅读更多...
verilog学习--1、语言要素

verilog学习--1、语言要素

先看一个例子 /*This is first Verilog progaram*/ timescale 1ns/1ns module HalfAdder(A,B,Sum,Carry);input A,B;output Sum, Carry; /**/assign #2 SumA^B;assign #5 CarryA&B&#xff1b; endmodule; Verilog以module为单位编写&#xff0c;每个文件一个module&#…
阅读更多...
AC 自动机 洛谷P3808 P3796 P5357

AC 自动机 洛谷P3808 P3796 P5357

洛谷P3808 #include <bits/stdc.h> using namespace std; const int maxn 1e6 5; int ch[maxn][30], fa[maxn], End[maxn]; int cnt 0 , n; int get_num(char c){return c - a;} void build(string s){int cur 0, len s.length();for(int i 0; i < len; i){int…
阅读更多...
C++蓝桥杯实训篇（二）

C++蓝桥杯实训篇（二）

片头 嗨咯~小伙伴们&#xff01;今天我们来一起学习算法和贪心思维&#xff0c;准备好了吗&#xff1f;咱们开始咯&#xff01; 第1题 数位排序 对于这道题&#xff0c;我们需要自己写一个排序算法&#xff0c;也就是自定义排序&#xff0c;按照数位从小到大进行排序。 举一…
阅读更多...
redisson常用加锁方式

redisson常用加锁方式

RLock lock redissonClient.getLock("lock:order:" order);和redissonDistributedLocker.tryLock("lock:order:" order&#xff0c; TimeUnit.SECONDS, RedisLockKey.DEFAULT_WAIT_TIME, RedisLockKey.DEFAULT_HOLD_TIME);这两种加锁方式的区别如下&…
阅读更多...
Go 微服务框架 | 路由实现

Go 微服务框架 | 路由实现

文章目录 不用框架实现web接口实现简单的路由实现分组路由支持不同的请求方式支持同一个路径的不同请求方式前缀树应用前缀树完善路由代码 不用框架实现web接口 // blog main.go 文件 package mainimport ("fmt""log""net/http" )func main() {…
阅读更多...
zabbix中通过模板实现自动发现对tcp端口批量监控

zabbix中通过模板实现自动发现对tcp端口批量监控

主要为了解决监控大量端口&#xff0c;避免繁琐的重复操作监控项和触发器 诸位~ 仅供参考哈 自动发现监控参考地址: https://blog.csdn.net/qq_37510195/article/details/130893655 模板 首先创建一个模板 自定义名称和群组 创建自动发现规则 模板——自动发现——创建发现规则…
阅读更多...
最新文章

Copyright @ 2022~2023