HarmonyOS應用開發(fā)：鴻蒙網(wǎng)絡管理，網(wǎng)絡請求獲取天氣信息
無論哪種技術開發(fā)，核心就是網(wǎng)絡通訊，數(shù)據(jù)操作這些主要業(yè)務處理的方面的，沒有網(wǎng)絡通訊操作的應用不能說不是好應用，但是一定是有缺陷的應用，鴻蒙也是一樣網(wǎng)絡通訊是核心的開發(fā)技能，了解網(wǎng)絡通訊就能將應用做到和后臺通訊，數(shù)據(jù)存儲到遠程服務或者獲取遠程服務數(shù)據(jù)，今天就聊聊網(wǎng)絡通訊的用法和實現(xiàn)。
每天學習一點點。
場景：
通過鴻蒙網(wǎng)絡通訊的api 中 GET，POST請求方式 實現(xiàn) 獲取天氣信息。
下面我們開始今天的文章，還是老規(guī)矩，通過如下幾點來說：
1，實現(xiàn)思路
2，代碼解析
3，實現(xiàn)效果
3，總結
一、實現(xiàn)思路
引入import http from '@ohos.net.http'; 網(wǎng)絡模塊， 通過let httpRequest = http.createHttp();創(chuàng)建一個請求任務，httpRequest.request 添加請求，根據(jù)URL地址，發(fā)起HTTP網(wǎng)絡請求，使用callback方式作為異步方法。
二、代碼解析
前提配置：
獲取網(wǎng)絡通訊數(shù)據(jù)必須實用網(wǎng)絡權限，需要在config.json配置文件中添加屬性。
"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}
],
網(wǎng)絡請求默認是支持https的，如果要支持http需要添加如下配置：
"deviceConfig": {
"default": {
"network": {
"cleartextTraffic": true
}
}
}
1、hml文件
添加兩個按鈕事件，用于get和post請求方式獲取數(shù)據(jù)，添加一個text用于顯示獲取的天氣信息。
<div class="container">
<button class="title" value="GET請求獲取數(shù)據(jù)" onclick="onClickGet"></button>
<button class="title" value="POST請求獲取數(shù)據(jù)" onclick="onClickPost"></button>
<text class="content">天氣信息：</text>
<text class="content">{{content}}</text>
</div>
2、css文件
.container {
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
}
.title {
width: 100%;
height: 60px;
font-size: 20px;
text-align: center;
margin-top: 20px;
}
.content{
font-size: 25px;
}
3、js文件
描述：引入import http from '@ohos.net.http'; 網(wǎng)絡模塊， 通過let httpRequest = http.createHttp();創(chuàng)建一個請求任務，httpRequest.request 添加請求，根據(jù)URL地址，發(fā)起HTTP網(wǎng)絡請求，使用callback方式作為異步方法。
- 設置強求方式：http.RequestMethod.GET，http.RequestMethod.POST。
- 設置請求頭：header: { 'Content-Type': 'application/json'}。
- 設置請求超時：readTimeout: 60000, connectTimeout: 60000。
import http from '@ohos.net.http';
export default {
data: {
title: 'World',
content:""
},
onClickGet(){
// 每一個httpRequest對應一個http請求任務，不可復用
let httpRequest = http.createHttp();
httpRequest.request("http://apis.juhe.cn/simpleWeather/query?key=397c9db4cb0621ad0313123dab416668&city=西安",
{
method: http.RequestMethod.GET,
header: {
'Content-Type': 'application/json'
},
readTimeout: 60000,
connectTimeout: 60000
}, (err, data) => {
if (!err) {
console.info('網(wǎng)絡Result:' + data.result);
this.content = data.result;
console.info('網(wǎng)絡code:' + data.responseCode);
console.info('網(wǎng)絡header:' + JSON.stringify(data.header));
console.info('網(wǎng)絡cookies:' + data.cookies); // 8+
console.info('網(wǎng)絡header.Content-Type:' + data.header['Content-Type']);
console.info('網(wǎng)絡header.Status-Line:' + data.header['Status-Line']);
} else {
console.info('網(wǎng)絡error:' + JSON.stringify(err));
}
});
},
onClickPost(){
// 每一個httpRequest對應一個http請求任務，不可復用
let httpRequest = http.createHttp();
// 用于訂閱http響應頭，此接口會比request請求先返回。可以根據(jù)業(yè)務需要訂閱此消息
// 從API 8開始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
httpRequest.on('headersReceive', (header) => {
console.info('header: ' + JSON.stringify(header));
});
httpRequest.request("http://apis.juhe.cn/simpleWeather/query?key=397c9db4cb0621ad0313123dab416668&city=西安",
{
method: http.RequestMethod.POST, // 可選，默認為http.RequestMethod.GET
// 開發(fā)者根據(jù)自身業(yè)務需要添加header字段
header: {
'Content-Type': 'application/json'
},
// 當使用POST請求時此字段用于傳遞內(nèi)容
extraData: {
"data": ""
},
connectTimeout: 60000, // 可選，默認為60s
readTimeout: 60000, // 可選，默認為60s
}, (err, data) => {
if (!err) {
// data.result為http響應內(nèi)容，可根據(jù)業(yè)務需要進行解析
console.info('Result:' + data.result);
this.content = data.result;
console.info('code:' + data.responseCode);
// data.header為http響應頭，可根據(jù)業(yè)務需要進行解析
console.info('header:' + JSON.stringify(data.header));
console.info('cookies:' + data.cookies); // 8+
} else {
console.info('error:' + JSON.stringify(err));
// 當該請求使用完畢時，調(diào)用destroy方法主動銷毀。
httpRequest.destroy();
}
});
}
}
三、實現(xiàn)效果
四、總結
- 引入import http from '@ohos.net.http'; 網(wǎng)絡模塊。
- 通過let httpRequest = http.createHttp();創(chuàng)建一個請求任務。
- httpRequest.request 添加請求，根據(jù)URL地址，發(fā)起HTTP網(wǎng)絡請求，使用callback方式作為異步方法。
- 設置強求方式：http.RequestMethod.GET，http.RequestMethod.POST。
- 設置請求頭：header: { 'Content-Type': 'application/json'}。
- 設置請求超時：readTimeout: 60000, connectTimeout: 60000
- post請求設置請求體：extraData: { "data": "" }。
