HarmonyOS應用開發：鴻蒙網絡管理，網絡請求獲取天氣信息

作者：黑板報呀 2022-08-25 21:46:51

今天就聊聊網絡通訊的用法和實現。

??https://ost.51cto.com??

無論哪種技術開發，核心就是網絡通訊，數據操作這些主要業務處理的方面的，沒有網絡通訊操作的應用不能說不是好應用，但是一定是有缺陷的應用，鴻蒙也是一樣網絡通訊是核心的開發技能，了解網絡通訊就能將應用做到和后臺通訊，數據存儲到遠程服務或者獲取遠程服務數據，今天就聊聊網絡通訊的用法和實現。

每天學習一點點。

場景：

通過鴻蒙網絡通訊的api 中 GET，POST請求方式實現獲取天氣信息。

下面我們開始今天的文章，還是老規矩，通過如下幾點來說：

1，實現思路
2，代碼解析
3，實現效果
3，總結

一、實現思路

引入import http from '@ohos.net.http'; 網絡模塊，通過let httpRequest = http.createHttp();創建一個請求任務，httpRequest.request 添加請求，根據URL地址，發起HTTP網絡請求，使用callback方式作為異步方法。

二、代碼解析

前提配置：

獲取網絡通訊數據必須實用網絡權限，需要在config.json配置文件中添加屬性。

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

網絡請求默認是支持https的，如果要支持http需要添加如下配置：

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

1、hml文件

添加兩個按鈕事件，用于get和post請求方式獲取數據，添加一個text用于顯示獲取的天氣信息。

<div class="container">
    <button class="title" value="GET請求獲取數據" onclick="onClickGet"></button>
    <button class="title" value="POST請求獲取數據" 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'; 網絡模塊，通過let httpRequest = http.createHttp();創建一個請求任務，httpRequest.request 添加請求，根據URL地址，發起HTTP網絡請求，使用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('網絡Result:' + data.result);
                    this.content = data.result;
                    console.info('網絡code:' + data.responseCode);
                    console.info('網絡header:' + JSON.stringify(data.header));
                    console.info('網絡cookies:' + data.cookies); // 8+
                    console.info('網絡header.Content-Type:' + data.header['Content-Type']);
                    console.info('網絡header.Status-Line:' + data.header['Status-Line']);
                } else {
                    console.info('網絡error:' + JSON.stringify(err));
                }
            });
    },
    onClickPost(){
        // 每一個httpRequest對應一個http請求任務，不可復用
        let httpRequest = http.createHttp();
        // 用于訂閱http響應頭，此接口會比request請求先返回。可以根據業務需要訂閱此消息
        // 從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
                // 開發者根據自身業務需要添加header字段
                header: {
                    'Content-Type': 'application/json'
                },
                // 當使用POST請求時此字段用于傳遞內容
                extraData: {
                    "data": ""
                },
                connectTimeout: 60000, // 可選，默認為60s
                readTimeout: 60000, // 可選，默認為60s
            }, (err, data) => {
            if (!err) {
                // data.result為http響應內容，可根據業務需要進行解析
                console.info('Result:' + data.result);
                this.content = data.result;
                console.info('code:' + data.responseCode);
                // data.header為http響應頭，可根據業務需要進行解析
                console.info('header:' + JSON.stringify(data.header));
                console.info('cookies:' + data.cookies); // 8+
            } else {
                console.info('error:' + JSON.stringify(err));
                // 當該請求使用完畢時，調用destroy方法主動銷毀。
                httpRequest.destroy();
            }
        });
    }
}