首页 > 其他分享 >【HarmonyOS】【ArkTS】如何使用HTTP网络请求获取动态数据刷新UI界面

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

时间:2023-06-07 11:04:13浏览次数:48  
标签:ArkTS HTTP 请求 dataList http HarmonyOS ohos async

【关键字】

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"
    }
  }
]

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

步骤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;
}

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

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

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

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

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

步骤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值。


【参考文档】

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/http-request-0000001478061585-V3?catalogVersion=V3

https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-http-0000001478061929-V3?catalogVersion=V3#ZH-CN_TOPIC_0000001523968386__request-2


标签:ArkTS,HTTP,请求,dataList,http,HarmonyOS,ohos,async
From: https://blog.51cto.com/u_15687416/6430331

相关文章

  • 一文搞懂TCP、HTTP、Socket、Socket连接池
    前言:作为一名开发人员我们经常会听到HTTP协议、TCP/IP协议、UDP协议、Socket、Socket长连接、Socket连接池等字眼,然而它们之间的关系、区别及原理并不是所有人都能理解清楚,这篇文章就从网络协议基础开始到Socket连接池,一步一步解释他们之间的关系。七层网络模型首先从网络通信的......
  • 【HarmonyOS】【ArkTS】如何使用HTTP网络请求获取动态数据刷新UI界面
    ​【关键字】HttpRequest、ArkTS、网络数据请求、@ohos.net.http 【前言】在使用ArkTS开发HarmonyOS应用时,需要调用HTTP网络请求 @ohos.net.http 动态获取数据,进行UI列表刷新,这想必是应用开发最常见的功能。但是根据官网网络请求的示例代码进行功能开发时,封装方法进行HTTP......
  • http服务器搭建
    参考来源:https://www.cnblogs.com/roluodev/p/13585182.html# yuminstallhttpd #关闭防火墙 #可以访问http://ip #http服务器的默认目录#http服务器开启目录sudovi/etc/httpd/conf.d/welcome.conf把Options-Indexes中的减号改为加号此处作用为访问目录......
  • HttpURLConnection调用webservice,c#、java、python等HTTP调用webservice,简单的webserv
    以前调用webservice一般使用axis、axis2先生成java类后,直接引用,多方便。但是有的webservice接口非常的函数,生成的java类非常多,有没有一种非常简化的方法。axis2有不生成类直接调用的方法,但是QName不容易找,每次查N久不到。有的反馈,使用CXF调用一样方便,但CXF还要使用maven下载jar,而......
  • HTTP响应
    HTTP响应的构成HTTP请求消息由3部分构成,分别是响应行、响应头、响应体。如图重点关注状态码和响应体。1、响应行(状态行):协议版本 状态码 状态描述协议版本:http/0.9(过时)、http/1.0、http/1.1(现用)状态码:(5种类型)1**:信息响应,服务器收到请求,需要请求者继续执行操作。2**:成......
  • Invalid character found in method name. HTTP method names must be tokens
    Gayhub上下载了一个别人的项目跑着玩,启动成功了,但是请求controller的时候,出现了这种错误:2018-08-2517:57:26,673-ErrorparsingHTTPrequestheaderNote:furtheroccurrencesofHTTPheaderparsingerrorswillbeloggedatDEBUGlevel.java.lang.IllegalArgumentEx......
  • TCP/IP,http,socket,长连接,短连接
    先看图:  TCP/IP是什么?   TCP/IP是个协议组,可分为三个层次:网络层、传输层和应用层。  在网络层有IP协议、ICMP协议、ARP协议、RARP协议和BOOTP协议。  在传输层中有TCP协议与UDP协议。  在应用层有FTP、HTTP、TELNET、SMTP、DNS等协议。   Socket是什么呢? Soc......
  • Tinyhttpd:源码分析【3】
    一、问题引入通过Tinyhttpd:运行测试【1】和抓包分析【2】,基本完成了对程序的功能测试和通信原理。此时可以进一步对源码进行分析,本文不考虑代码一行一行的分析,仅对关键部分代码解析。二、解决过程2-1main()函数主函数主要创建http的监听套接字,等待客户端的连接。一旦有新......
  • 【HarmonyOS】关于 Caused by java.lang.IllegalStateException The specified...
    【问题描述】线上收到大量手机的崩溃异常,以华为手机为主,崩溃如下1.Causedby:java.lang.IllegalStateException:Thespecifiedmessagequeuesynchronizationbarriertokenhasnotbeenpostedorhasalreadybeenremoved.2.atandroid.os.MessageQueue.removeSyncBarri......
  • 【网络基础】【HTTP】如何理解是 TCP 面向字节流协议?
    1  前言TCP是面向字节流的协议,UDP是面向报文的协议?这里的「面向字节流」和「面向报文」该如何理解。我们这节来看看哈。2  如何理解字节流?之所以会说TCP是面向字节流的协议,UDP是面向报文的协议,是因为操作系统对TCP和UDP协议的发送方的机制不同,也就是问题原因在发......