鸿蒙http请求

1xx（信息性状态码）：表示请求已接收，继续处理。如 100（继续）、101（切换协议）。2xx（成功状态码）：表示请求已成功接收、理解、并接受。如 200（成功）、201（已创建）、204（无内容）。3xx（重定向状态码）：表示需要客户端采取进一步操作完成请求，通常需要客户端重新发起请求。如 301（永久重定向）、302（临时重定向）、304（未修改）。4xx（客户端错误状态码）：表示客户端请求

Liang_beginning

1022人浏览 · 2025-04-24 12:22:29

Liang_beginning · 2025-04-24 12:22:29 发布

引言

在软件开发中，http请求肯定是必不可少的，但是官方文档的复杂难懂，网络上的资料也要钱，我就自己整理了一下关于http请求的相关内容，觉得对你有帮助的，点个关注和收藏点赞吧，后续大量好文持续更新。

基本概念

请求（Request）：客户端向服务器发送的消息。
响应（Response）：服务器接收到请求后返回给客户端的消息。
消息格式：HTTP消息由报文头（Header）、状态行（Status Line）和可选的实体主体（Entity Body）组成。

请求方法

OPTIONS：OPTIONS方法描述了目标资源的通信选项。
GET：GET方法请求指定资源的表示。使用GET的请求应该只检索数据，不应该包含请求内容。
HEAD：HEAD方法请求与GET请求相同的响应，但没有响应主体。
POST：POST方法将实体提交给指定的资源，通常会导致服务器上的状态更改。
PUT：PUT方法将目标资源的所有当前表示替换为请求内容。
DELETE：DELETE方法用于删除指定的资源。
TRACE：TRACE方法沿到达目标资源的路径执行消息环回测试。
CONNECT：CONNECT方法建立到由目标资源标识的服务器的隧道。

状态码

1xx（信息性状态码）：表示请求已接收，继续处理。如 100（继续）、101（切换协议）。
2xx（成功状态码）：表示请求已成功接收、理解、并接受。如 200（成功）、201（已创建）、204（无内容）。
3xx（重定向状态码）：表示需要客户端采取进一步操作完成请求，通常需要客户端重新发起请求。如 301（永久重定向）、302（临时重定向）、304（未修改）。
4xx（客户端错误状态码）：表示客户端请求有误，服务器无法处理。如 400（错误请求）、401（未授权）、403（禁止访问）、404（未找到）。
5xx（服务器错误状态码）：表示服务器处理请求时出错。如 500（内部服务器错误）、502（网关错误）、503（服务不可用）、504（网关超时）。

鸿蒙http接口使用方法

鸿蒙提供了一系列的http接口对网络资源进行访问，但是，不能说很不好用，简直是不好用，一不小心就“Bad Request”，虽然有第三方库的Axios，但是原本的也需要会，在此简单介绍一下。

前置条件
- http请求需要配置ohos.permission.INTERNET权限，在module.json5中与"name"同级，配置该权限：

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

GET请求方式(请求示例)：

import { http } from '@kit.NetworkKit'

@Entry
@Component
struct HttpRequestPage {
  @State requestUrl: string = 'http://26.62.173.145:8080/listUser' // 请求地址
  @State requestRes: string = '' // 请求返回值，渲染在页面上
  async requestFunction() {
    try {
      let httpRequest= http.createHttp()
      const options: http.HttpRequestOptions = {
        method: http.RequestMethod.GET
      }
      let res = await httpRequest.request(this.requestUrl, options)
      this.requestRes = JSON.stringify(JSON.parse(res.result as string))
    } catch (err) {
      console.error(`httpRequest: 请求出现问题，原因: ${err}`)
      this.requestRes = JSON.stringify(err)
    }
  }
  build() {
    Scroll() {
      Column() {
        Text(`当前请求地址为: ${this.requestUrl}`)
          .width('100%')
        Text(`当前请求结果为: ${this.requestRes}`)
          .width('100%')
        Button('点击开始请求')
          .onClick(async () => {
            await this.requestFunction()
          })
      }
      .padding(20)
    }
    .width('100%')
    .height('100%')
  }
}

代码解释：页面和其他部分直接略过了，主要解释一下requestFunction()函数。
let httpRequest= http.createHttp()用于创建一个http对象，这一步是必须的，所有的http请求接口都是在这对象之下。
下面这段代码的是在设置请求的相关参数，其中method为请求方式，值为枚举，默认为GET方式，其他参数可以参考：11 文发起请求可选参数的类型和取值范围文档中心 11。

const options: http.HttpRequestOptions = {
      method: http.RequestMethod.GET
}

下列代码，调用了request方法，并且转换成异步方法，request方法第一个参数是请求地址，第二个参数是请求的相关参数。
返回值是一个HttpResponse类型，里面的result就是从后端返回的数据，其中还有很多其他的数据，可以参考：request方法回调函数的返回值类型

let res = await httpRequest.request(this.requestUrl, options)
this.requestRes = JSON.stringify(JSON.parse(res.result as string))

POST请求方式(接口示例)：

import { http } from '@kit.NetworkKit'

@Entry
@Component
struct HttpRequestPage {
  @State requestUrl: string = 'http://26.62.173.145:8080/addUser'
  @State requestRes: string = ''
  async requestFunction() {
    try {
      let httpRequest= http.createHttp()
      const options: http.HttpRequestOptions = {
        method: http.RequestMethod.POST,
        header: {'content-Type': 'application/json'},
        extraData: {
          "id": "",
          "userId": "202504241203",
          "imgUrl": "",
          "name": "",
          "account": "qwer1234",
          "password": "123456",
          "createdPosts": "",
          "phone": "123456786",
          "state": "",
          "following": "",
          "followers": ""
        }
      }
      let res = await httpRequest.request(this.requestUrl, options)
      this.requestRes = JSON.stringify(JSON.parse(res.result as string))
    } catch (err) {
      console.error(`httpRequest: 请求出现问题，原因: ${err}`)
      this.requestRes = JSON.stringify(err)
    }
  }
  build() {
    Scroll() {
      Column() {
        Text(`当前请求地址为: ${this.requestUrl}`)
          .width('100%')
        Text(`当前请求结果为: ${this.requestRes}`)
          .width('100%')
        Button('点击开始请求')
          .onClick(async () => {
            await this.requestFunction()
          })
      }
      .padding(20)
    }
    .width('100%')
    .height('100%')
  }
}

依旧解释requestFunction()函数，POST请求options中必须声明header为如代码所示的样子：

        header: {'content-Type': 'application/json'},

修正：此处实验后发现使用
```
 header: {'content-Type': 'application/x-www-form-urlencoded'},
```
也可以执行，但是请求体只能用下面的参数携带方法
并且需要将method更改为POST。
否则报错：,
其他常见错误：SyntaxError: Unexpected Text in JSON：检查传过去的json数据格式，这个是json数据格式错误。
其他请求方式：
- 与上方两个请求类似，只需要注意当请求为POST、PUT、DELETE时，头部必须声明为，这一点在官方文档中也有提及(文档中心这个连接里面的header部分的解释中可以查看到)：
- ```
{'content-Type': 'application/json'}
```
- 携带参数为extraData, 只能是字符串和json数据，如果需要附带单个参数，则需要如下所示代码：
- ```
userId=12345&userName=LiMing
```