[[438171]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

簡介

前段時間一直研究ArkUI中的聲明式開發，開發了一些demo，但都是界面相關的，相對來說比較基礎，也比較簡單。所以研究一下其他的，現在成熟的APP都會有網絡交互，所以記錄一篇網絡請求相關的。

本項目界面搭建基于ArkUI中TS擴展的聲明式開發范式，關于語法和概念直接看官網官方文檔地址：

基于TS擴展的聲明式開發范式1、基于TS擴展的聲明式開發范式2

本文介紹開發基礎知識(網絡請求):

數據接口：聚合免費API(天氣預報)

網絡請求：ArkUI自帶的網絡請求

效果演示

開發步驟

1、聲明網絡請求權限

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

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

2、支持http明文請求

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

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

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com