HarmonyOS ArkUI之开发基础（网络请求）

简介

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

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

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

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

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

网络请求：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