HarmonyOS ArkUI之开发基础(网络请求)

时间:2022-06-01 19:33:18

HarmonyOS ArkUI之开发基础(网络请求)

简介

前段时间一直研究ArkUI中的声明式开发,开发了一些demo,但都是界面相关的,相对来说比较基础,也比较简单。所以研究一下其他的,现在成熟的APP都会有网络交互,所以记录一篇网络请求相关的。

本项目界面搭建基于ArkUI中TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:

基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2

本文介绍开发基础知识(网络请求):

数据接口:聚合免费API(天气预报)

网络请求:ArkUI自带的网络请求

效果演示

HarmonyOS ArkUI之开发基础(网络请求)HarmonyOS ArkUI之开发基础(网络请求)

开发步骤

1、声明网络请求权限

在 entry 下的 config.json 中 module 字段下配置权限

  1. "reqPermissions": [
  2. {
  3. "name": "ohos.permission.INTERNET"
  4. }
  5. ]

2、支持http明文请求

默认支持https,如果要支持http,在 entry 下的 config.json 中 deviceConfig 字段下配置

  1. "default": {
  2. "network": {
  3. "cleartextTraffic": true
  4. }
  5. }

3、创建HttpRequest

  1. // 导入模块
  2. import http from '@ohos.net.http';
  3. // 创建HttpRequest对象
  4. let httpRequest = http.createHttp();

4、发起请求

GET请求(默认为GET请求)

  1. // 请求方式:GET
  2. getRequest() {
  3. // 每一个httpRequest对应一个http请求任务,不可复用
  4. let httpRequest = http.createHttp()
  5. let url = 'http://apis.juhe.cn/simpleWeather/query?key=397c9db4cb0621ad0313123dab416668&city=北京'
  6. httpRequest.request(url, (err, data) => {
  7. // 处理数据
  8. })
  9. }

POST请求

目前发现API的BUG:看官方文档method可以设置为字符串,从源码得知method的类型为:RequestMethod,但是设置 method: http.RequestMethod.POST 请求数据报错,设置成 method: http.POST 可以

  1. // 请求方式:POST
  2. postRequest() {
  3. // 每一个httpRequest对应一个http请求任务,不可复用
  4. let httpRequest = http.createHttp()
  5. let url = 'http://apis.juhe.cn/simpleWeather/query'
  6. httpRequest.request(url,
  7. {
  8. // 看源码得知method的类型为:RequestMethod
  9. // 但是设置 method: http.RequestMethod.POST 报错
  10. // 设置成 method: http.POST 可以
  11. method: http.POST,
  12. extraData: {
  13. 'key': '397c9db4cb0621ad0313123dab416668',
  14. 'city': '北京'
  15. }
  16. },
  17. (err, data) => {
  18. // 处理数据
  19. })
  20. }

5、解析数据(简单示例)

(1)网络请求到的json字符串

  1. {
  2. "name":"梁迪迪",
  3. "age":"26",
  4. "sex":"男"
  5. }

(2)创建相应的对象

  1. class User {
  2. name: string // 姓名
  3. age: string // 年龄
  4. sex: string // 性别
  5. }

(3)解析数据

  1. // 请求方式:GET
  2. getRequest() {
  3. // 每一个httpRequest对应一个http请求任务,不可复用
  4. let httpRequest = http.createHttp()
  5. let url = ''
  6. httpRequest.request(url, (err, data) => {
  7. // 处理数据
  8. if (!err) {
  9. if (data.responseCode == 200) {
  10. // 解析数据
  11. var user: User = JSON.parse(JSON.stringify(data.result))
  12. }
  13. }
  14. })
  15. }


原文链接:https://harmonyos.51cto.com