开源 Arkts 鸿蒙应用 开发（十）通讯--Http

 文章的目的为了记录使用Arkts 进行Harmony app 开发学习的经历。本职为嵌入式软件开发，公司安排开发app，临时学习，完成app的开发。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。

 相关链接：

开源 Arkts 鸿蒙应用 开发（一）工程文件分析-CSDN博客

开源 Arkts 鸿蒙应用 开发（二）封装库.har制作和应用-CSDN博客

开源 Arkts 鸿蒙应用 开发（三）Arkts的介绍-CSDN博客

开源 Arkts 鸿蒙应用 开发（四）布局和常用控件-CSDN博客

开源 Arkts 鸿蒙应用 开发（五）控件组成和复杂控件-CSDN博客

开源 Arkts 鸿蒙应用 开发（六）数据持久--文件和首选项存储-CSDN博客

开源 Arkts 鸿蒙应用 开发（七）数据持久--sqlite关系数据库-CSDN博客

开源 Arkts 鸿蒙应用 开发（八）多媒体--相册和相机-CSDN博客

开源 Arkts 鸿蒙应用 开发（九）通讯--tcp客户端-CSDN博客

开源 Arkts 鸿蒙应用 开发（十）通讯--Http-CSDN博客

 推荐链接：

开源 java android app 开发（一）开发环境的搭建-CSDN博客

开源 java android app 开发（二）工程文件结构-CSDN博客

开源 java android app 开发（三）GUI界面布局和常用组件-CSDN博客

开源 java android app 开发（四）GUI界面重要组件-CSDN博客

开源 java android app 开发（五）文件和数据库存储-CSDN博客

开源 java android app 开发（六）多媒体使用-CSDN博客

开源 java android app 开发（七）通讯之Tcp和Http-CSDN博客

开源 java android app 开发（八）通讯之Mqtt和Ble-CSDN博客

开源 java android app 开发（九）后台之线程和服务-CSDN博客

开源 java android app 开发（十）广播机制-CSDN博客

开源 java android app 开发（十一）调试、发布-CSDN博客

开源 java android app 开发（十二）封库.aar-CSDN博客

推荐链接：

开源C# .net mvc 开发（一）WEB搭建_c#部署web程序-CSDN博客

开源 C# .net mvc 开发（二）网站快速搭建_c#网站开发-CSDN博客

开源 C# .net mvc 开发（三）WEB内外网访问(VS发布、IIS配置网站、花生壳外网穿刺访问)_c# mvc 域名下不可訪問內網,內網下可以訪問域名-CSDN博客

开源 C# .net mvc 开发（四）工程结构、页面提交以及显示_c#工程结构-CSDN博客

https://blog.csdn.net/ajassi2000/article/details/149584283?spm=1011.2124.3001.6209开源 C# .net mvc 开发（五）常用代码快速开发_c# mvc开发-CSDN博客

本章内容主要是通过Http访问web网站，获得天气的Json数据，进行解析的功能。将访问的页面地址进行修改，添加id和key则可以访问网站的Api，实现高级功能。

一、添加权限，与上个章节相同，在module.json5的最后添加上以下代码

 "requestPermissions": [{"name": "ohos.permission.INTERNET"}]

二、Index.ets代码

要点：

1.  网上有各种网络API，通常的方式是访问地址和id以及key，通过注册可以获得id和key，访问网址就可以获得输入，比如https://xxx/now?&id=CN101010100&key=xxxxx

2.  关键流程：创建HTTP实例， 发起GET请求，处理响应(HTTP状态码非200为出错需要处理)

https://www.weather.com.cn/data/sk/101010100.html地址页面图片

下面为代码

import http from '@ohos.net.http';
import promptAction from '@ohos.promptAction';
import webview from '@ohos.web.webview';// 定义天气信息的接口类型
interface WeatherInfo {city: string;cityid: string;temp: string;WD: string;WS: string;SD: string;WSE: string;time: string;isRadar: string;Radar: string;njd: string;qy: string;rain: string;
}interface WeatherResponse {weatherinfo: WeatherInfo;
}@Entry
@Component
struct HttpExample {@State responseData: string = '等待获取数据...';@State webController: webview.WebviewController = new webview.WebviewController();@State weatherInfo: WeatherInfo | null = null;build() {Column() {// 显示获取到的网页内容Scroll() {Column() {Text(this.responseData).fontSize(16).width('100%').textAlign(TextAlign.Start).padding(10)// 添加天气信息显示区域if (this.weatherInfo) {Divider().margin(10)Text('解析后的天气数据:').fontSize(18).fontWeight(FontWeight.Bold).margin({ bottom: 10 })Text(`城市: ${this.weatherInfo.city}`).fontSize(16).margin({ bottom: 5 })Text(`温度: ${this.weatherInfo.temp}°C`).fontSize(16).margin({ bottom: 5 })Text(`风向: ${this.weatherInfo.WD}`).fontSize(16).margin({ bottom: 5 })Text(`风力: ${this.weatherInfo.WS}`).fontSize(16).margin({ bottom: 5 })Text(`湿度: ${this.weatherInfo.SD}`).fontSize(16).margin({ bottom: 5 })Text(`气压: ${this.weatherInfo.qy} hPa`).fontSize(16).margin({ bottom: 5 })Text(`更新时间: ${this.weatherInfo.time}`).fontSize(16).margin({ bottom: 5 })}}.width('100%')}.height('80%').width('100%')// 请求按钮Button('获取天气数据').width('80%').height(50).margin(20).onClick(() => {this.fetchWeatherData();})}.width('100%').height('100%')}// 发起HTTP请求private fetchWeatherData() {let httpRequest = http.createHttp();this.responseData = '正在请求数据...';this.weatherInfo = null;httpRequest.request('https://www.weather.com.cn/data/sk/101010100.html',{method: http.RequestMethod.GET,header: {'Content-Type': 'application/json'}},(err, data) => {if (err) {this.responseData = `请求失败: ${JSON.stringify(err)}`;promptAction.showToast({ message: '请求失败', duration: 2000 });return;}if (data.responseCode === 200) {try {const result: WeatherResponse = JSON.parse(data.result.toString());//this.responseData = `HTTP状态码: ${data.responseCode}\n\n原始JSON数据:\n${JSON.stringify(result, null, 2)}`;this.responseData = data.result.toString();if (result.weatherinfo) {this.weatherInfo = result.weatherinfo;}promptAction.showToast({ message: '获取并解析成功', duration: 2000 });} catch (e) {this.responseData = `JSON解析失败: ${e.message}\n\n原始数据:\n${data.result}`;promptAction.showToast({ message: 'JSON解析失败', duration: 2000 });}} else {this.responseData = `请求异常: HTTP状态码 ${data.responseCode}`;promptAction.showToast({ message: '请求异常', duration: 2000 });}});}
}

三、最终效果

​