1. Http请求数据的必要性

在日常的开发过程中, 如果页面的数据都在本地的话, 那么整个页面将是完全写死的. 每次更新渲染的数据都需要重新发布, 这样是不符合整个的业务要求的. 所以使用Http模块来动态的请求数据, 完成可变动的数据展示, 是非常重要一个步骤.
DEMO示例:

2. Http的请求流程是怎样的?

流程图(Stage模型):

3. 流程讲解

3.1 导入Http模块

在需要使用Http请求的地方, 我们需要对Http模块进行导入. 使用import关键字来导入鸿蒙内置的Http模块

import { http } from '@kit.NetworkKit'

3.1.1 申请网络请求权限

当然, 如果你在项目中, 第一次使用Http请求进行数据交互, 那么需要在配置文件中进行网络权限的申请. 具体路径为: entry/src/main/module.json5
在module.json5文件中, module对象中添加以下片段:

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

完整代码参考:

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:jizhangben",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      },
      {
        "name": "bookkeeping",
        "srcEntry": "./ets/bookkeeping/bookkeeping.ets",
        "description": "$string:bookkeeping_desc",
        "icon": "$media:avatar",
        "label": "$string:bookkeeping_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

3.1.2 Http的模块封装

在导入Http模块的时候, 我们也可以选择对Http模块进行封装, 方便后面的数据请求复用. 提高代码的简洁度, 提高项目的可维护性.

封装代码示例:

3.2 使用生命周期函数来发送Http请求, 使用then方法来接收异步返回的结果并处理

因为是请求的首页数据, 所以选择在页面刚刚创建的时候发送请求, 也就是aboutToAppear函数中进行Http请求.
因为Http请求是一个异步操作, 所以会返回一个Promise对象, 使用.then方法来接收将来返回的结果.
在then方法中传入一个回调函数, 这个回调函数需要有一个形参用来接收将来Http请求返回过来的结果. 在回调函数内部, 对这个结果进行业务需要的数据处理.

aboutToAppear(): void {
    http.createHttp().request(
        "https://v1.hitokoto.cn/",
        {
            expectDataType: http.HttpDataType.OBJECT
        }
    )
        .then(res => {
            this.message = res.result as yiyan
        })
}

4. DEMO完整代码参考:

import { http } from '@kit.NetworkKit';

interface yiyan {
  id: number;
  uuid: string;
  hitokoto: string;
  type: string;
  from: string;
  from_who: string;
  creator: string;
  creator_uid: number;
  reviewer: number;
  commit_from: string;
  created_at: string;
  length: number;
}

@Entry
@Component
struct Yiyan {
  @State message: yiyan | null = null;

  aboutToAppear(): void {
    http.createHttp().request(
      "https://v1.hitokoto.cn/",
      {
        expectDataType: http.HttpDataType.OBJECT
      }
    )
      .then(res => {
        this.message = res.result as yiyan
      })
  }

  build() {
    Row() {
      Column({ space: 10 }) {
        Column({ space: 20 }) {
          Text(this.message?.hitokoto || "还没有数据噢~")
            .width("80%")
            .fontSize(26)
            .fontWeight(FontWeight.Bold)
          Text(`--- ${this.message?.from}`)
            .alignSelf(ItemAlign.End)
        }

        Button("换一句")
          .width(120)
          .height(35)
          .backgroundColor("#00000000")
          .fontColor("#222")
          .fontWeight(400)
          .border({ width: 1 })
          .onClick(() => {
            http.createHttp().request(
              "https://v1.hitokoto.cn/",
              {
                expectDataType: http.HttpDataType.OBJECT
              }
            )
              .then(res => {
                this.message = res.result as yiyan
              })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

鸿蒙开发基础 - Http请求数据接口动态渲染首页