写点什么

鸿蒙网络编程系列 9- 使用 HttpRequest 模拟登录示例

作者:长弓三石
  • 2024-10-22
    广东
  • 本文字数:3324 字

    阅读完需:约 11 分钟

1. HTTP 协议简介

HTTP(Hypertext Transfer Protocol)协议是现代互联网的基石协议之一,有着最广泛的应用,于 1991 年由英国计算机科学家蒂姆·伯纳斯·李(Tim Berners-Lee)正式提出,当时被称为 HTTP 协议 0.9 版本;1996 年通过 RFC 1945 发布了 1.0 版本,当然,这些都不是正式的 Internet 标准,第一个正式的 HTTP 协议标准是 1.1 版本,于 1997 年 1 月通过 RFC 2068 发布,然后又于 2015 年 5 月通过 RFC 7540 正式发布了 HTTP/2 标准,最新的标准是 HTTP/3,通过 2022 年 6 月 6 日的 RFC 9114 正式发布。


鸿蒙 API 内置了对 HTTP 协议客户端的支持,遗憾的是目前(API 9,包括 API 10、11)还不支持服务端(倒是可以在 API 10 或更高版本中通过 TCP Server 自行实现一个),本文将讲解 HTTP 客户端相关方法的使用。

2. HttpRequest 的常用方法

鸿蒙封装的 HTTP 操作类位于模块 http 中,使用如下的方式导入:


import http from '@ohos.net.http';


​ http 模块包括多个 http 请求相关方法,就本文而言,重点需要掌握的是如下两个:


1)createHttp(): HttpRequest


创建一个 HttpRequest 对象,每一个 HTTP 请求都需要有一个独立的 HttpRequest 对象,多个请求就要创建多个对象,最多创建 100 个。


2)request(url: string, options? : HttpRequestOptions): Promise


根据 URL 地址,发起 HTTP 网络请求,使用 Promise 方式作为异步方法,其中参数 url 为发起网络请求的 URL 地址,options 为发起请求的可选参数,包括请求的方法、额外数据、希望的返回值类型、请求头等信息,详细的可以参考官方文档。

3. HTTP 模拟登录示例

为演示 HTTP 模拟登录,假设我们有这样一个网站,访问该网站时如果没有登录,会被重定向到登录页面,如图所示:



如果成功登录后,会重定向到首页,如图所示,这里会出现下载列表:



我们要实现的示例就是模拟这个登录过程,从而可以得到首页登录后的内容。


本示例运行后的页面如图所示:



单击“请求”按钮可以模拟没有登录直接访问首页的情况,单击“登录”按钮就是模拟登录,


下面详细介绍创建该应用的步骤。


步骤 1:创建 Empty Ability 项目。


步骤 2:在 module.json5 配置文件加上对权限的声明:


"requestPermissions": [      {        "name": "ohos.permission.INTERNET"      }    ]
复制代码


这里添加了访问互联网的权限。


步骤 3:在 Index.ets 文件里添加如下的代码:


import http from '@ohos.net.http';import util from '@ohos.util';
@Entry@Componentstruct Index { //连接、通讯历史记录 @State msgHistory: string = '' //首页地址 @State homePageUrl: string = "http://192.168.100.100:8081/index" //登录地址 @State loginUrl: string = "http://192.168.100.100:8081/auth" //用户名 @State loginName: string = "zhanglei" //密码 @State passwd: string = "cangjie" scroller: Scroller = new Scroller()
build() { Row() { Column() { Text("模拟登录示例") .fontSize(14) .fontWeight(FontWeight.Bold) .width('100%') .textAlign(TextAlign.Center) .padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Text("首页地址:") .fontSize(14) .width(80) .flexGrow(0)
TextInput({ text: this.homePageUrl }) .onChange((value) => { this.homePageUrl = value }) .width(110) .fontSize(11) .flexGrow(1)
Button("请求") .onClick(() => { this.requestHomePage() }) .width(70) .fontSize(14) .flexGrow(0) } .width('100%') .padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Text("用户名:") .fontSize(14) .width(80) .flexGrow(0)
TextInput({ text: this.loginName }) .onChange((value) => { this.loginName = value }) .width(110) .fontSize(11) .flexGrow(1)
Text("密码:") .fontSize(14) .width(60) .flexGrow(0)
TextInput({ text: this.passwd }) .onChange((value) => { this.passwd = value }) .type(InputType.Password) .width(100) .fontSize(11) .flexGrow(1) } .width('100%') .padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Text("登录地址:") .fontSize(14) .width(80) .flexGrow(0)
TextInput({ text: this.loginUrl }) .onChange((value) => { this.loginUrl = value }) .width(100) .fontSize(11) .flexGrow(1) Button("登录") .onClick(() => { this.login() }) .width(70) .fontSize(14) .flexGrow(0) } .width('100%') .padding(10)
Scroll(this.scroller) { Text(this.msgHistory) .textAlign(TextAlign.Start) .padding(10) .width('100%') .backgroundColor(0xeeeeee) } .align(Alignment.Top) .backgroundColor(0xeeeeee) .height(300) .flexGrow(1) .scrollable(ScrollDirection.Vertical) .scrollBar(BarState.On) .scrollBarWidth(20) } .width('100%') .justifyContent(FlexAlign.Start) .height('100%') } .height('100%') }
//请求首页 requestHomePage() { //http请求对象 let httpRequest = http.createHttp();
httpRequest.request(this.homePageUrl) .then((resp) => { this.msgHistory += "响应码:" + resp.responseCode + "\r\n" this.msgHistory += resp.result + "\r\n" }) .catch((e) => { this.msgHistory += "请求失败:" + e.message + "\r\n" }) }
//模拟登录 login() { //http请求对象 let httpRequest = http.createHttp(); //请求的登录名和密码参数 let params = "username=" + this.loginName + "&password=" + this.passwd
let opt: http.HttpRequestOptions = { method: http.RequestMethod.POST, extraData: params, header: {'Content-Type': 'application/x-www-form-urlencoded' }, expectDataType: http.HttpDataType.STRING }
httpRequest.request(this.loginUrl, opt) .then((resp) => { this.msgHistory += "响应码:" + resp.responseCode + "\r\n" this.msgHistory += resp.result + "\r\n" }) .catch((e) => { this.msgHistory += "请求失败:" + e.message + "\r\n" }) }}
复制代码


步骤 4:编译运行,可以使用模拟器或者真机。


步骤 5:配置网站首页地址和登录地址,然后单击“请求”按钮,页面如图所示:



可以看到,被重定向到了登录页面。


然后单击“登录”按钮,界面如图所示:



此时已经成功登录,可以看到下载文件信息。


这样,就成功模拟了 HTTP 客户端的登录。


(本文作者原创,除非明确授权禁止转载)


本文源码地址:


https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/http/SimulateLogin


本系列源码地址:


https://gitee.com/zl3624/harmonyos_network_samples


发布于: 刚刚阅读数: 6
用户头像

长弓三石

关注

还未添加个人签名 2024-10-16 加入

二十多年软件开发经验的软件架构师,华为HDE、华为云HCDE、仓颉语言CLD、CCS,著有《仓颉语言网络编程》、《仓颉语言元编程》、《仓颉语言实战》、《鲲鹏架构入门与实战》等书籍,清华大学出版社出版。

评论

发布
暂无评论
鸿蒙网络编程系列9-使用HttpRequest模拟登录示例_DevEco Studio_长弓三石_InfoQ写作社区