HarmonyOS笔记3：从网络数据接口API获取数据

news2024/9/23 20:17:24

面向HarmonyOS的移动应用一般采用MVVM模式（见参考文献【1】），其中：
M（Model层)：模型层，存储数据和相关逻辑的模型。它表示组件或其他相关业务逻辑之间传输的数据。Model是对原始数据的进一步处理。
V（View层）：视图层，在ArkUI框架中通常是@Components修饰组件渲染的移动应用界面的UI。
VM（ViewModel层）：视图模型层，在ArkUI中，ViewModel是存储在自定义组件的状态变量、LocalStorage和AppStorage中的数据。这些数据为UI提供渲染的内容，同时UI界面也可以通过视图组件修改模型数据。是模型层和视图层的中介。
在创建一个移动应用中，最重要的是获取数据以及对数据的处理。在这篇文章中，主要讨论一下模型层中的数据来源。在HarmonyOS中，获取数据的方式主要有：

1.从网络中获取数据接口API。
2.从华为云数据库获取网络数据库的资源。
3.从移动终端直接获取本地的数据

从这篇文章开始，将分别对以上三种情况简单介绍一下。本篇文章中简单介绍网络中获取并使用数据接口API的数据。

一、数据接口API

API接口的请求方法：常用的HTTP请求方法有GET、POST、PUT、DELETE等，不同的请求方法对应不同的操作。
API的URL：这是你的代码将发送请求的地址。
API的参数：一些API可能需要参数来完成特定的操作，例如，你可能需要提供一个特定的ID来获取某个特定的数据。
API的返回数据：你需要知道API返回的数据的格式（如JSON、XML等）以及数据的含义。

例如：请求“https://dog.ceo/api/breeds/image/random”(关于数据api接口的更详细介绍，见参考文献【2】）返回的JSON数据如下：
在这里插入图片描述
请求获取的随机JSON数据如下：

{
“message”:“https://images.dog.ceo/breeds/gaddi-indian/Gaddi.jpg”,
“status”:“success”
}

二、网络访问数据接口API

1.创建一个新的HarmonyOS项目

在这里插入图片描述
在这里插入图片描述
点击确认创建新的项目。

2.配置网络访问许可

在新项目的entry模块的module.json5配置文件中，新增网络访问许可，同时修改"extensionAbilities"的"exported"属性为true，代码如下所示：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "requestPermissions": [{
      "name": "ohos.permission.INTERNET"
    }],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "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"
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [
      {
        "name": "EntryBackupAbility",
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",
        "exported":true,
        "metadata": [
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup_config"
          }
        ]
      }
    ]
  }
}

3.在页面中增加获取API数据的请求

请求网络资源的可以通过request接口来实现

request接口开发步骤

  1. 从@kit.NetworkKit中导入http命名空间。 调用createHttp()方法，创建一个HttpRequest对象。
  2. 调用该对象的on()方法，订阅http响应头事件，此接口会比request请求先返回。可以根据业务需要订阅此消息。
  3. 调用该对象的request()方法，传入http请求的url地址和可选参数，发起网络请求。 按照实际业务需要，解析返回结果。
  4. 调用该对象的off()方法，取消订阅http响应头事件。
  5. 当该请求使用完毕时，调用destroy()方法主动销毁。

下列的代码实现了对上述的api的访问，具体内容如下：
修改界面的Index.ets

//导入包
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State imageURL: string = ''

  aboutToAppear(){
   this.doNetwork()
  }

  build() {
    RelativeContainer() {
      Text(this.imageURL)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }

  async doNetwork(){
    //设置访问数据api的url链接
    let apiUrl = "https://dog.ceo/api/breeds/image/random"
    //创建一个Http请求
    let httpRequest = http.createHttp()
    //订阅http响应头事件
    httpRequest.on("headersReceive",(header)=>{
      console.info('header: ' + JSON.stringify(header));
    })
    //请求url
    httpRequest.request(apiUrl,{
      method:http.RequestMethod.GET,
      header:{
        'Content-Type':'application/json',
      },
      usingCache:true,
      connectTimeout:6000,//连接时间6s
      readTimeout:6000,//读取时间6s
    },(err:BusinessError,response:http.HttpResponse)=>{
      if(!err){
        console.info(`响应的数据结果是:${JSON.stringify(response.result)}`)
      }else {
        console.error('error:' + JSON.stringify(err));
        // 取消订阅HTTP响应头事件
        httpRequest.off('headersReceive');
        // 当该请求使用完毕时，调用destroy方法主动销毁
        httpRequest.destroy();
      }
    })
  }
}

因为界面还未定义，因此运行时，可以在日志窗口中观察到获取到api数据，运行结果如下所示：
在这里插入图片描述
但是获取的JSON字符串需要得到具体的属性数据，例如图片的链接地址，因此需要将JSON数据转换成数据对象。

4.解析JSON数据

因为需要解析JSON字符串，定义接口ReceivedData：

interface ReceivedData{
  message,
  status
}

然后将JSON字符串解析成ReceivedData对象，代码段如下：

//将获取的数据转换成JSON字符串
let result = JSON.stringify(response.result)
console.info(`响应的数据结果是:${result}`)
//解析JSON字符串转换成数据对象
let data:ReceivedData = JSON.parse(result)

通过这样的方式获取了特定的对象。

5.使用解析后的数据

修改Index.ets代码，修改UI界面，使得点击按钮不断刷新界面，完整的Index.ets代码如下：

//导入包
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State imageURL: string = ''

  aboutToAppear(){
   this.doNetwork()
  }

  build() {
    Column() {
      if(this.imageURL!=''){
        Image(this.imageURL)
          .width("100%")
          .height(300)
      }
      Text(this.imageURL)
        .id('HelloWorld')
        .fontSize(12)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      Button("刷新").onClick(()=>{
        this.doNetwork()
      })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }

  async doNetwork(){
    //设置访问数据api的url链接
    let apiUrl = "https://dog.ceo/api/breeds/image/random"
    //创建一个Http请求
    let httpRequest = http.createHttp()
    //订阅http响应头事件
    httpRequest.on("headersReceive",(header)=>{
      console.info('header: ' + JSON.stringify(header));
    })
    //请求url
    httpRequest.request(apiUrl,{
      method:http.RequestMethod.GET,
      expectDataType: http.HttpDataType.OBJECT,//指定返回数据的类型
      header:{
        'Content-Type':'application/json',
      },
      usingCache:true,
      connectTimeout:6000,//连接时间6s
      readTimeout:6000,//读取时间6s
    },(err:BusinessError,response:http.HttpResponse)=>{
      if(!err){
        //将获取的数据转换成JSON字符串
        let result = JSON.stringify(response.result)
        console.info(`响应的数据结果是:${result}`)
        //解析JSON字符串转换成数据对象
        let data:ReceivedData = JSON.parse(result)
        this.imageURL = data.message
        console.info(`图片地址：${data.message}-获取状态：${data.status}`)
      }else {
        console.error('error:' + JSON.stringify(err));
        // 取消订阅HTTP响应头事件
        httpRequest.off('headersReceive');
        // 当该请求使用完毕时，调用destroy方法主动销毁
        httpRequest.destroy();
      }
    })
  }
}

interface ReceivedData{
  message,
  status
}

最后的运行结果如下图所示：

在这里插入图片描述
在这里插入图片描述

参考文献

【1】“MVVM模式” HarmonyOS Developer
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-mvvm-V5
【2】“推荐 GitHub 上的一套公开 API 接口，简直不要太全！” 腾讯云开发者社区
http://cloud.tencent.com/developer/article/2082773
【3】“HTTP数据请求” HarmonyOS Developer
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/http-request-V5

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1989738.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

享界S9别乱选，定价有大玄机！

享界S9别乱选，定价有大玄机！

文 | AUTO芯球 作者 | 雷慢 享界S9刚上市， 就有人傻钱多、工作忙的老大哥来问我， 两个版本怎么选？ 这不巧了吗，论华为车系，我是资深用户， 常开问界M9，试过智界S7，问界M7&#x…
阅读更多...
PUA自己到无法自拔，或许是你过度信奉【优绩主义】

PUA自己到无法自拔，或许是你过度信奉【优绩主义】

本文算是人文社科心理篇的第二期，不时发一些【理性】的【鸡汤】，或许对你认识社会本质有所帮助~ 一.定义 顾名思义，从理科生的角度来说，【优绩主义】以优秀的成绩作为评判人生是否成功的极大型指标，在东亚的【休息羞…
阅读更多...
性能优化之自定义指令实现图片懒加载

性能优化之自定义指令实现图片懒加载

1）图片懒加载 是常见的用于在页面滚动时动态加载图片，而不是在页面加载时一次性加载所有图片。性能优化必备提高页面加载速度的手段，特别是在包含大量图片的网站上。 图片懒加载的原理，其实就是，当图片出现在视口内时…
阅读更多...
数据分析：宏基因组的荟萃分析之MMUPHin

数据分析：宏基因组的荟萃分析之MMUPHin

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 介绍 批次效应是实验中由于样本处理和测序技术变异引起的非生物学差异，可能干扰研究结果。这种效应难以完全消除，但可通过方法如PCA、PC…
阅读更多...
【Vue3】Pinia getters

【Vue3】Pinia getters

【Vue3】Pinia getters 背景简介开发环境开发步骤及源码 背景 随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本…
阅读更多...
求职leetcode题目（6）

求职leetcode题目（6）

1.简化路径 解题思路: 根据题意，使用栈进行模拟即可。 具体的，从前往后处理 path，每次以 item 为单位进行处理（有效的文件名），根据 item 为何值进行分情况讨论： item 为有效值 ：存…
阅读更多...
AQS框架

AQS框架

文章目录 概要AQS概述公平锁与非公平锁原理可重入 概要 假设现在需要写一个SDK层面的锁，应该如何实现呢？ 初步的思路如下： 搞一个状态标记，用来表示持有或未持有锁，但得是 volatile 类型的保证线程可见性。编写一个 …
阅读更多...
揭秘公司高效查快递的秘密武器

揭秘公司高效查快递的秘密武器

在快节奏的现代商务环境中，物流管理的效率直接关系到企业的运营成本和客户满意度。对于拥有大量快递业务往来的公司而言，如何快速、准确地追踪每一个包裹的物流信息，成为了一项至关重要的任务。今天，我们将揭秘一款公司高效查快递…
阅读更多...
智慧农场数字港系统设计与实现

智慧农场数字港系统设计与实现

1 项目介绍 1.1 摘要 农业是一个国家的根本之一，也是国家经济、社会发展的重中之重，从“粮食第一”方针到农业生产市场化，再到乡村振兴、加强扶持农业技术创新和基础建设，我国的农业发展以及走过了几个阶段，并一直在…
阅读更多...
Nature教你怎么用GPT做学术

Nature教你怎么用GPT做学术

ChatGPT如何助力学术写作：三个关键方式 生成性人工智能（AI）在近年来逐渐成为学术界的热门话题。Dritjon Gruda在2024年4月发表于《Nature》的一篇文章中，详细探讨了ChatGPT如何在学术写作、编辑和同行评审中提供帮助。这篇文章将…
阅读更多...
第R2周：Pytorch实现：LSTM-火灾温度预测

第R2周：Pytorch实现：LSTM-火灾温度预测

nn.LSTM() 函数详解 nn.LSTM 是 PyTorch 中用于创建长短期记忆（Long Short-Term Memory，LSTM）模型的类。LSTM 是一种循环神经网络（Recurrent Neural Network，RNN）的变体，用于处理序列数据&#…
阅读更多...
常见的框架漏洞

常见的框架漏洞

框架 Web框架(Web framework)或者叫做Web应⽤框架(Web application framework)，是⽤于 进⾏Web开发的⼀套软件架构。⼤多数的Web框架提供了⼀套开发和部署⽹站的⽅式。为Web的 ⾏为提供了⼀套⽀持⽀持的⽅法。使⽤Web框架，很多的业务逻辑外的功能不需要⾃…
阅读更多...
微步社区帖子中使用编码数据调戏吃瓜群众初探

微步社区帖子中使用编码数据调戏吃瓜群众初探

什么，居然有人在微步社区公然使用编码后的字符串调戏吃瓜群众。 在演练活动的的某一天，微步威胁情报社区突然流行多重编码后内容的帖子。作者本着为人民群众利益着想的目的，结合毕生所学，决定要将这些奇技淫巧和小把戏公之于众。…
阅读更多...
R 语言学习教程，从入门到精通，R 判断语句（7）

R 语言学习教程，从入门到精通，R 判断语句（7）

1、R 判断语句 判断结构要求程序员指定一个或多个要评估或测试的条件，以及条件为真时要执行的语句（必需的）和条件为假时要执行的语句（可选的）。 下面是大多数编程语言中典型的判断结构的一般形式： R 语言…
阅读更多...
嵌入式linux系统中USART应用实现

嵌入式linux系统中USART应用实现

各位开发者大家好，今天主要给大家分享一下，如何在linux系统中使用UART串口的功能。 第一：串口的作用 UART：通用异步收发器简称串口。常用的调试：移植u-boot、内核时，主要使用串口查看打印信息。也可以外接各种模块。 第二：linux系统中的串口 接下来，我们来看一下，linu…
阅读更多...
达梦数据库的系统视图v$mem_heap

达梦数据库的系统视图v$mem_heap

达梦数据库的系统视图v$mem_heap 达梦数据库的V$MEM_HEAP视图提供了关于内存堆的信息，仅当系统启动时 MEMORY_LEAK_CHECK 为 1 时有效。这个视图通常包含内存堆的使用情况，包括堆的大小、已使用空间、空闲空间等。通过查询V$MEM_HEAP视图，用…
阅读更多...
图书馆座位再利用小程序的设计

图书馆座位再利用小程序的设计

管理员账户功能包括：系统首页，个人中心，用户管理，座位信息管理，座位预订管理，互勉信息管理，意见反馈管理，系统管理 微信端账号功能包括：系统首页，我的 开发…
阅读更多...
[算法]第一集 递归(未完待续)

[算法]第一集 递归(未完待续)

递归啊递归，说简单简单，说难难。 首先我们要知道 一、什么是递归？ 我们再C语言和数据结构里都用了不少递归，这里就不多详细介绍。 递归简单来说就是函数自己调用自己的情况 二、为什么要用递归呢？ 本质来说其实就…
阅读更多...
GIS赋能数字经济的地理脉络

GIS赋能数字经济的地理脉络

在全球数字化转型的洪流中，数字经济以其惊人的速度与规模，重塑全球经济格局，成为推动社会进步的关键力量。地理信息系统（GIS）在数字经济的浪潮中扮演着不可替代的角色，它不仅是数字空间信息的集大动脉&…
阅读更多...
用户管理①

用户管理①

📑打牌 ： da pai ge的个人主页 🌤️个人专栏 ： da pai ge的博客专栏 ☁️宝剑锋从磨砺出，梅花香自苦寒来 ☁️运维工程师的职责：监…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023