[[438171]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

簡介

前段時(shí)間一直研究ArkUI中的聲明式開發(fā)，開發(fā)了一些demo，但都是界面相關(guān)的，相對(duì)來說比較基礎(chǔ)，也比較簡單。所以研究一下其他的，現(xiàn)在成熟的APP都會(huì)有網(wǎng)絡(luò)交互，所以記錄一篇網(wǎng)絡(luò)請(qǐng)求相關(guān)的。

本項(xiàng)目界面搭建基于ArkUI中TS擴(kuò)展的聲明式開發(fā)范式，關(guān)于語法和概念直接看官網(wǎng)官方文檔地址：

基于TS擴(kuò)展的聲明式開發(fā)范式1、基于TS擴(kuò)展的聲明式開發(fā)范式2

本文介紹開發(fā)基礎(chǔ)知識(shí)(網(wǎng)絡(luò)請(qǐng)求):

數(shù)據(jù)接口：聚合免費(fèi)API(天氣預(yù)報(bào))

網(wǎng)絡(luò)請(qǐng)求：ArkUI自帶的網(wǎng)絡(luò)請(qǐng)求

效果演示

開發(fā)步驟

1、聲明網(wǎng)絡(luò)請(qǐng)求權(quán)限

在 entry 下的 config.json 中 module 字段下配置權(quán)限

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

2、支持http明文請(qǐng)求

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

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

3、創(chuàng)建HttpRequest

// 導(dǎo)入模塊 
import http from '@ohos.net.http'; 
// 創(chuàng)建HttpRequest對(duì)象 
let httpRequest = http.createHttp(); 

4、發(fā)起請(qǐng)求

GET請(qǐng)求(默認(rèn)為GET請(qǐng)求)

// 請(qǐng)求方式：GET 
getRequest() { 
  // 每一個(gè)httpRequest對(duì)應(yīng)一個(gè)http請(qǐng)求任務(wù)，不可復(fù)用 
  let httpRequest = http.createHttp() 
  let url = 'http://apis.juhe.cn/simpleWeather/query?key=397c9db4cb0621ad0313123dab416668&city=北京' 
  httpRequest.request(url, (err, data) => { 
    // 處理數(shù)據(jù) 
  }) 
} 

POST請(qǐng)求

目前發(fā)現(xiàn)API的BUG：看官方文檔method可以設(shè)置為字符串，從源碼得知method的類型為：RequestMethod，但是設(shè)置 method: http.RequestMethod.POST 請(qǐng)求數(shù)據(jù)報(bào)錯(cuò)，設(shè)置成 method: http.POST 可以

// 請(qǐng)求方式：POST 
postRequest() { 
  // 每一個(gè)httpRequest對(duì)應(yīng)一個(gè)http請(qǐng)求任務(wù)，不可復(fù)用 
  let httpRequest = http.createHttp() 
  let url = 'http://apis.juhe.cn/simpleWeather/query' 
  httpRequest.request(url, 
    { 
      // 看源碼得知method的類型為：RequestMethod 
      // 但是設(shè)置 method: http.RequestMethod.POST 報(bào)錯(cuò) 
      // 設(shè)置成 method: http.POST 可以 
      method: http.POST, 
      extraData: { 
        'key': '397c9db4cb0621ad0313123dab416668', 
        'city': '北京' 
      } 
    }, 
    (err, data) => { 
      // 處理數(shù)據(jù) 
    }) 
} 

5、解析數(shù)據(jù)(簡單示例)

（1）網(wǎng)絡(luò)請(qǐng)求到的json字符串

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

 （2）創(chuàng)建相應(yīng)的對(duì)象

class User { 
  name: string // 姓名 
  age: string // 年齡 
  sex: string // 性別 
} 

（3）解析數(shù)據(jù)

// 請(qǐng)求方式：GET 
getRequest() { 
  // 每一個(gè)httpRequest對(duì)應(yīng)一個(gè)http請(qǐng)求任務(wù)，不可復(fù)用 
  let httpRequest = http.createHttp() 
  let url = '' 
  httpRequest.request(url, (err, data) => { 
    // 處理數(shù)據(jù) 
    if (!err) { 
      if (data.responseCode == 200) { 
        // 解析數(shù)據(jù) 
        var user: User = JSON.parse(JSON.stringify(data.result)) 
      } 
    } 
  }) 
} 

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com