HarmonyOS http请求

无标签

发布日期: 2025-01-28

更新日期: 2025-02-11

文章字数: 1.6k

一、鸿蒙http数据请求

1.1 基本概念

开发的应用可以通过系统内置的 http 模块，通过 HTTP 协议和服务器进行通讯

什么是服务器?
在网络上提供服务器的一台电脑，比如提供数据服务
什么是 http 模块？

鸿蒙内置的一个模块，可以通过【HTTP 协议】和服务器进行通信

3.HTTP协议?

1	规定了客户端和服务器返回的内容【格式】

1	在通讯的时候需要按照格式发送内容，才可以进行通讯

1.2 基本使用

// 1. 导入
import http from '@ohos.net.http';

// 2. 创建请求对象
const req = http.createHttp()
// 3. 根据提供好的 地址发送请求，并在 then 中获取服务器响应的内容
req.request('请求地址')
  .then((res: http.HttpResponse) => {
    AlertDialog.show({ message: JSON.stringify(res) })
  })

配置网络权限

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",


    /****需要在该处添加网络配置权限*****/
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }


    ],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ]
  }
}

二、URL的认识

2.1 概念

URL 的组成

协议，域名，资源路径

URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。

2.2 URL参数查询

URL查询参数是提供给网络服务器的额外参数。这些参数是用 & 符号分隔的键/值对列表。

目的：让我们获取到指定需求的数据！！！

案例：获取n条笑话

参数: num 笑话数量 ** req.request(**https://api-vue-base.itheima.net/api/joke/list?num=${this.jokeNum})

三、开心一笑

默认获取若干条笑话，并渲染到页面上
下拉刷新
触底加载更多
点击返回顶部


import http from '@ohos.net.http'

// 创建请求对象
const req = http.createHttp()

interface JokeRes {
  msg: string
  code: number
  data: string[]
}

@Entry
@Component
struct Day01_07_Jokes {
  @State jokes: string [] = []
  jokeNum: number = 5
  @State refreshing: boolean = false
  listScroller: Scroller = new Scroller()
  isLoadingMore: boolean = false

  getJokeList() {
    req.request('https://api-vue-base.itheima.net/api/joke/list?num=' + this.jokeNum)
      .then((res: http.HttpResponse) => {
        // AlertDialog.show({
        //   message: res.result.toString()
        // })
        const Res = JSON.parse(res.result as string) as JokeRes
        this.jokes = Res.data
        this.refreshing = false
      })
  }

  aboutToAppear(): void {
    this.getJokeList()
  }

  build() {
    Refresh({ refreshing: $$this.refreshing }) {
      Column() {
        // 顶部
        this.HeaderBuilder()
        // 笑话列表
        List({ space: 10, scroller: this.listScroller }) {
          ForEach(this.jokes, (joke: string) => {
            ListItem() {
              Column({ space: 10 }) {
                Text(joke.split('，')[0])
                  .fontSize(20)
                  .fontWeight(600)

                Row({ space: 15 }) {
                  titleIcon({ icon: $r('app.media.ic_public_time'), info: '2024-1-1' })
                  titleIcon({ icon: $r('app.media.ic_public_read'), info: '阅读(6666)' })
                  titleIcon({ icon: $r('app.media.ic_public_comments'), info: '评论(123)' })
                }

                Text(joke)
                  .fontSize(15)
                  .fontColor(Color.Gray)
              }
              .width('100%')
              .alignItems(HorizontalAlign.Start)
              .padding(20)

            }
            .borderRadius(10)
            .backgroundColor(Color.White)
            .shadow({ radius: 2, color: Color.Gray })
          })
          ListItem() {
            LoadingProgress()
              .width(40)
          }.width('100%')
        }
        .padding(10)
        .layoutWeight(1)
        .onReachEnd(() => {
          if (!this.isLoadingMore) {
            this.isLoadingMore = true
            // AlertDialog.show({
            //   message: 'hello world'
            // })
            req.request('https://api-vue-base.itheima.net/api/joke/list?num=' + this.jokeNum)
              .then((res: http.HttpResponse) => {
                const response = JSON.parse(res.result as string) as JokeRes
                this.jokes.push(...response.data) //展开运算符
                this.isLoadingMore = false
              })
          }
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#f6f6f6')
    }
    .onRefreshing(() => {
      this.getJokeList()
    })
  }

  @Builder
  HeaderBuilder() {
    Row() {
      Image($r('app.media.ic_public_drawer_filled'))
        .width(25);

      Image($r('app.media.ic_public_joke_logo'))
        .width(30)
        .onClick(() => {
          this.listScroller.scrollTo({
            xOffset: 0,
            yOffset: 0,
            animation: true
          })
        })
      Image($r('app.media.ic_public_search'))
        .width(30);
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .height(60)
    .padding(10)
    .border({ width: { bottom: 2 }, color: '#f0f0f0' })
    .backgroundColor(Color.White)
  }
}

@Component
struct titleIcon {
  icon: ResourceStr = ''
  info: string = ''

  build() {
    Row() {
      Image(this.icon)
        .width(15)
        .fillColor(Color.Gray)
      Text(this.info)
        .fontSize(14)
        .fontColor(Color.Gray)
    }
  }
}

四、请求方法和数据提交

GET — 获取数据

POST — 提交数据

PUT — 修改数据（全部）

DELETE — 删除数据

PATCH — 修改数据（部分）

上面开心一笑案例属于（GET）获取数据这一请求方法
日常开发中较为常见的需要提交数据给服务器的场景（POST）：用户登录，在线买东西。

提交数据基本写法：

const req = http.createHttp()
req.request('请求地址', {
  method: http.RequestMethod.POST, // 通过枚举的方式设置请求方法，如果是 get 可以省略
  extraData: {} // 数据写在 extraData 中 支持 对象 字符串 ArrayBuffer（二进制数据）
  extraData:'key=value&key2=value2'// 字符串的话 写成 'key=value&key2=value2'....
  // 对象的话需要额外设置其他参数，先用
})