#星光计划2.0# HarmonyOS ArkUI之开发基础(网络请求) 原创 精华

发布于 2021-12-1 11:09
浏览
7收藏

作者:梁青松

【本文正在参与51CTO HarmonyOS技术社区创作者激励计划-星光计划2.0】

简介

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

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

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

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

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

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

ArKUI系列文章

《HarmonyOS ArkUI之仿微信朋友圈图片预览》

《HarmonyOS ArkUI之仿微信图片选择》

《HarmonyOS ArkUI之自定义组件侧滑菜单(JS)》

《HarmonyOS ArkUI之聊天列表滑动删除(TS)》

《#星光计划2.0# HarmonyOS ArkUI之开发基础(网络请求)》

效果演示

#星光计划2.0# HarmonyOS ArkUI之开发基础(网络请求)-开源基础软件社区 #星光计划2.0# HarmonyOS ArkUI之开发基础(网络请求)-开源基础软件社区

开发步骤

1、声明网络请求权限

entry 下的 config.jsonmodule 字段下配置权限

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

2、支持http明文请求

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

"default": {
  "network": {
    "cleartextTraffic": true
  }
}

3、创建HttpRequest

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

4、发起请求

GET请求(默认为GET请求)

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

POST请求

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

// 请求方式:POST
postRequest() {
  // 每一个httpRequest对应一个http请求任务,不可复用
  let httpRequest = http.createHttp()
  let url = 'http://apis.juhe.cn/simpleWeather/query'
  httpRequest.request(url,
    {
      // 看源码得知method的类型为:RequestMethod
      // 但是设置 method: http.RequestMethod.POST 报错
      // 设置成 method: http.POST 可以
      method: http.POST,
      extraData: {
        'key': '397c9db4cb0621ad0313123dab416668',
        'city': '北京'
      }
    },
    (err, data) => {
      // 处理数据
    })
}

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

1.网络请求到的json字符串

{
    "name":"梁迪迪",
    "age":"26",
    "sex":"男"
}

2.创建相应的对象

class User {
  name: string // 姓名
  age: string // 年龄
  sex: string // 性别
}

3.解析数据

// 请求方式:GET
getRequest() {
  // 每一个httpRequest对应一个http请求任务,不可复用
  let httpRequest = http.createHttp()
  let url = ''
  httpRequest.request(url, (err, data) => {
    // 处理数据
    if (!err) {
      if (data.responseCode == 200) {
        // 解析数据
        var user: User = JSON.parse(JSON.stringify(data.result))
      }
    }
  })
}

结尾

每天进步一点点、需要付出努力亿点点。

项目地址:https://gitee.com/liangdidi/NetworkRequestDemo(需要登录才能看到演示图)

更多原创内容请关注:开鸿 HarmonyOS 学院

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-12-1 11:11:18修改
8
收藏 7
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐