【HarmonyOS】【ArkTS】如何使用HTTP网络请求获取动态数据刷新UI界面

这篇具有很好参考价值的文章主要介绍了【HarmonyOS】【ArkTS】如何使用HTTP网络请求获取动态数据刷新UI界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【关键字】

HttpRequest、ArkTS、网络数据请求、@ohos.net.http

【前言】

在使用ArkTS开发HarmonyOS应用时,需要调用HTTP网络请求 @ohos.net.http 动态获取数据,进行UI列表刷新,这想必是应用开发最常见的功能。但是根据官网网络请求的示例代码进行功能开发时,封装方法进行HTTP请求后,返回获取数据总是为空,无法返回调用接口获取的结果,经过一系列步骤检查,终于获取到数据,在此附上我的开发步骤、一些注意事项以及参考文档。

【开发步骤】

步骤1:根据官方文档,HTTP网络请求需要申请ohos.permission.INTERNET权限,需要在配置文件module.json5中添加权限,如下:

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

步骤2:封装HTTP请求方法,由于这里需要请求数据后返回,所以不能直接用callback方式作为异步方法,需要使用Promise方式作为异步方法,配合await和async使用,代码参考如下(其中MyData为自定义类,可忽略):

import http from '@ohos.net.http';
import MyData from '../MyData'

export default async function getHttpData(): Promise<MyData[]> {
  let dataList: MyData[] = []

  let httpRequest = http.createHttp();
  let response = httpRequest.request(
    // 填写HTTP请求的URL地址,可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "http://xxxxx",
    {
      method: http.RequestMethod.GET, // 可选,默认为http.RequestMethod.GET
      // 开发者根据自身业务需要添加header字段
      header: {
        'Content-Type': 'application/json'
      },
      expectDataType: http.HttpDataType.STRING, // 可选,指定返回数据的类型
    }
  );
  // 使用await和async,等待请求完成处理数据后返回
  await response.then((data) => {
    if (data.responseCode == 200) {
      // 处理返回结果
      const response = data.result + "";
      const res = JSON.parse(response).data
      for (let i = 0; i < res.length; i++) {
        let item = res[i];
        dataList.push({
          id: item.id, content: item.content, createTime: item.createTime
        });
      }
    } else {
      // todo 请求失败,进行失败逻辑处理
    }
  }).catch((err) => {
    // todo 请求失败,进行失败逻辑处理
    console.info('error:' + JSON.stringify(err));
  })
  return dataList;
}

步骤3:在ets文件中调用方法获取数据,注意由于封装getHttpData时为async方法,所以调用同样需要使用async方式调用,代码如下所示:

@State dataList: Array<MyData> = [{ id: "1", content: "content", createTime: "" }]

async aboutToAppear() {
  this.dataList = await getHttpData()
}

步骤4:获取到dataList数组后,就可以通过ForEach循环显示组件和数据啦,到此就完成HTTP网络请求动态数据获取刷新UI界面啦。

【注意事项】

1、使用ArkTS中网络请求接口时,一定要申请ohos.permission.INTERNET权限;

2、封装方法进行HTTP请求时,注意需要使用Promise方式配合await和async使用,await添加到获取数据处理数据那一步,才能同步返回获取后数据结果;

3、调用HTTP请求方法时,同样需要使用async。

4、我提供的示例中未使用extraData,若需要进行参数请求时,注意不能对extraData整个参数进行加密处理,因为extraData通过string方式传递时,是使用key1=value1&key2=value2方式连接,其中“=”和“&”不能进行加密处理,只能加密处理其中的key或者value值。

【参考文档】

文档中心:HTTP数据请求

文档中心: @ohos.net.http (数据请求)文章来源地址https://www.toymoban.com/news/detail-717636.html

到了这里,关于【HarmonyOS】【ArkTS】如何使用HTTP网络请求获取动态数据刷新UI界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS 发送http网络请求

    好 本文 我们来说 http请求 首先 我们要操作网络内容 需要申请权限 项目中找到 main目录下的module.json5 最下面加上 这里 我在本地写了一个get接口 大家可以想办法 弄一个后端接口 首先 我们编写一个组件雏形 我们导入 @ohos.net.http 然后 通过 createHttp 获取一个http对象 然后通过对

    2024年01月23日
    浏览(45)
  • 鸿蒙HarmonyOS-HTTP网络数据请求

    应用可以通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。 亲爱的读者: 首先,我要感谢您抽出宝贵的时间阅读这篇文章。我深知,您的每一分每一秒都是宝贵的。为此,我在创作这篇文章时付出了巨大的努力,力求为您提供最具价

    2024年01月16日
    浏览(70)
  • HarmonyOS开发:基于http开源一个网络请求库

    网络封装的目的,在于简洁,使用起来更加的方便,也易于我们进行相关动作的设置,如果,我们不封装,那么每次请求,就会重复大量的代码逻辑,如下代码,是官方给出的案例: 以上的案例,每次请求书写这么多代码,在实际的开发中,是无法承受的,所以基于此,封装

    2024年02月06日
    浏览(51)
  • 基于 HarmonyOS 的 HTTPS 请求过程开发示例(ArkTS)

    本篇 Codelab 基于网络模块以及 Webview 实现一次 HTTPS 请求,并对其过程进行抓包分析。效果如图所示: ● Webview:提供 Web 控制能力,Web 组件提供网页显示能力。 ● HTTP数据请求:网络管理模块,提供 HTTP 数据请求能力,支持 GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT 请

    2024年02月03日
    浏览(35)
  • 【鸿蒙应用ArkTS开发系列】- http网络库使用讲解和封装

    现在网上的应用,基本都是网络应用,需要进行联网获取数据,而常用的联网获取数据的方式有http、socket、websocket等。 在鸿蒙应用、服务中,stage模式开发下,鸿蒙官方为我们提供了一个网络组件库 http ,我们通过 import http from ‘@ohos.net.http’; 即可以完成引用。 @ohos.net.http

    2024年02月15日
    浏览(54)
  • Arkts http数据请求

    使用Arkts功能需要申请ohos.permission.INTERNET权限。即在module.json5文件中申明网络访问权限:ohos.permission.INTERNET。如下 Arkts http数据请求功能主要由http模块提供。具体接口说明如下表。 接口名 功能描述 createHttp() 创建一个http请求。 request() 根据URL地址,发起HTTP网络请求。 destroy

    2024年02月04日
    浏览(52)
  • 如何获取HTTP请求时间与响应时间【附源码】

    今日遇到了一个问题,要去获取HTTP报文在 请求 和 响应 的时间,因为没有原生的API可以调用,所以需要一定的技巧~ 下面主体的框架和代码,我使用了form表单去构造一个POST请求,然后在Servlet中重写doPost()方法,然后实现获取请求时间和响应时间的代码逻辑 我们可以先去观察

    2024年02月08日
    浏览(67)
  • HarmonyOS使用HTTP访问网络

    日常生活中我们使用应用程序看新闻、发送消息等,都需要连接到互联网,从服务端获取数据。例如,新闻应用可以从新闻服务器中获取最新的热点新闻,从而给用户打造更加丰富、更加实用的体验。 那么要实现这样一种能实时从服务端获取数据的场景,就依赖于HTTP数据请

    2024年02月03日
    浏览(33)
  • ArkTS - 网络请求

    应用通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。 前端开发肯定都使用过一个叫 axios 的 第三方库 ,它是是一个基于 promise 的网络请求库,可以用于浏览器和 node.js,它是前端最流行的发送ajax请求的第三方库。 如果你不知道什么

    2024年01月24日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包