首页 > 编程笔记 > 通用技能 阅读:1

鸿蒙HTTP请求详解(附带示例)

HTTP(Hyper Text Transfer Protocol,超文本传输协议)是一种用于在网络上传输超文本的协议,它基于请求−响应模式,并且通常建立在传输控制协议(TCP)之上。

HTTP 定义了客户端与服务器之间通信的消息格式,包括客户端可以发送的请求类型以及服务器应返回的响应内容。这种简洁的通信模型是推动现代网络发展和技术繁荣的关键因素。

HarmonyOS 的 http 模块支持发起 HTTP 请求,从服务端获取数据。例如,新闻应用可以从新闻服务器中获取最新的热点新闻,从而给用户打造更加丰富、更加实用的体验。

我们按照以下方式来导入http模块:
// 导入http模块
import { http } from '@kit.NetworkKit';

HTTP请求方法

根据 HTTP 标准,HTTP 请求可以使用多种请求方法。常用的请求方法如下:

HTTP 方法 功能描述
GET 请求指定的页面信息,并返回实体主体。
HEAD 类似于 GET 请求,但返回的响应中没有具体的内容,用于获取报头。
POST 向指定资源提交数据进行处理请求(如提交表单或上传文件),数据包含在请求体中;可能导致新建或修改资源。
PUT 从客户端向服务器传送的数据取代指定文档的全部内容。
DELETE 请求服务器删除指定的页面。
CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS 允许客户端查看服务器的性能。
TRACE 回显服务器收到的请求,主要用于测试或诊断。
PATCH 对 PUT 方法的补充,用于对已知资源进行局部更新。

当浏览者访问一个网页时,浏览者的浏览器会向网页所在的服务器发出请求。当浏览器接收并显示网页时,此网页所在的服务器会返回一个包含 HTTP 状态码的信息头用以响应浏览器的请求。

下面是常见的 HTTP 状态码:

通过HTTP请求数据

接下来演示如何通过 HTTP 来向 Web 服务请求数据。

为了演示该功能,创建一个名为“ArkTSHttp”的应用。在应用的界面上,通过单击按钮来触发 HTTP 请求的操作。

1) 准备一个HTTP服务接口

HTTP 服务接口地址为:https://xxx.com/data/people.json,通过调用该接口,可以返回如下 JSON 格式的数据:
[{"name":"Michael"},
{"name":"Andy Huang","age":25,"homePage":"https://xxx.com/books"},
{"name":"Justin","age":19},
{"name":"Way Lau","age":35,"homePage":"https://xxx.com"}]

2) 添加使用Button组件来触发单击

在初始化的 Text 组件的下方增加一个 Button 组件,以实现“请求”按钮。代码如下:
build(){
  Row(){
    Column(){
      Text(this.message)
        .fontSize(38)
        .fontWeight(FontWeight.Bold)
      // 请求
      Button('请求', { type: ButtonType.Capsule })
        .width(140)
        .fontSize(40)
        .fontWeight(FontWeight.Medium)
        .margin({ top: 20, bottom: 20 })
        .onClick(() => {
          this.httpReq()
        })
    }
    .width("100%")
  }
  .height('100%')
}
当触发 onClick 事件时,会执行 httpReq 方法。

3) 发起HTTP请求

httpReq 方法实现如下:
// 导入http模块
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';

// ...
private httpReq() {
  // 创建httpRequest对象
  let httpRequest = http.createHttp();
  let url = "https://xxx.com/data/people.json";

  let promise = httpRequest.request(
    // 请求url地址
    url,
    {
      // 请求方式
      method: http.RequestMethod.GET,
      // 可选,默认为60s
      connectTimeout: 60000,
      // 可选,默认为60s
      readTimeout: 60000,
      // 开发者根据自身业务需要添加header字段
      header: {
        'Content-Type': 'application/json'
      }
    }
  );

  // 处理响应结果
  promise.then((data) => {
    if (data.responseCode === http.ResponseCode.OK) {
      console.info('Result:' + data.result);
      console.info('code:' + data.responseCode);
      this.message = JSON.stringify(data.result);
    }
  }).catch((err: BusinessError) => {
    console.info('error:' + JSON.stringify(err));
  });
}
上述代码中,演示了发起 HTTP 请求的基本流程:

4) 增加权限

要访问网络资源,需要在 module.json5 文件中声明使用网络的权限“ohos.permission.INTERNET”,示例如下:
"module": {
  // ...
  "requestPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    }
  ]
}

5) 运行

运行应用显示的界面效果如下图所示:


图 1 运行应用显示的界面效果

单击“请求”按钮后发起HTTP请求,返回的结果显示在界面上。

相关文章