鸿蒙网络编程系列 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"      })  }}