鴻蒙JS中使用fetch發送資料請求

首先需要配置網絡通路的權限，在config.json中添加以下代碼。

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

添加位置如下圖所示

預設支援https，如果要支援http，需要在config.json的"deviceConfig": {}裡增加network标簽，屬性辨別

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

添加位置如下圖所示：

 配置完了以後就可以使用fetch.fetch發送資料請求了。

首先我們先建立一個手機端的工程，然後在index.hml檔案中添加以下代碼：

<div class="container">
    <button class="btn" @click="goback">傳回首頁</button>
    <button class="btn" value="擷取資料" onclick="onClick"></button>
    <text class="tet">
        {{ winfo }}
    </text>
</div>
           

在index.css檔案中添加以下代碼

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn{
    width: 200px;
    height: 50px;
    font-size: 30px;
    margin-top: 20px;
}

           

 在JS檔案中添加以下函數，代碼的意思我都給注釋上了

import router from '@system.router';//導入路由子產品
import fetch from '@system.fetch';//導入fetch子產品

export default {
    data: {
        winfo:""//動态擷取資料
    },
    goback(){
        router.back();//傳回手機首頁
    },

    //當按鈕按下時觸發
    onClick(){
        //發起網絡請求
        fetch.fetch({
            url:`https://ai.baidu.com/`, //資源位址
            //設定header僞裝
            header:{'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.70'},
            responseType:"json", //請求的參數類型
            //如果擷取資料成功的話執行以下函數
            success:(resp)=>
            {
                this.winfo = resp.data;  //令擷取到的資料賦給winfo
                console.log("傳回的資料："+this.winfo)//列印出資料
            },
            //如果擷取資料失敗則執行以下函數
            fail:(resp)=>
            {
                this.winfo = resp.data;
                console.log("擷取資料失敗："+this.winfo)
            }
        });
    },
    
    onInit() {
    }
}
           

 運作後點選按鈕就開始擷取資料了，擷取資料需要一點時間，耐心等一下哦！

擷取成功會在手機上顯示，擷取失敗的話會在左下角的Hilog中顯示“擷取資料失敗”。

更多的資訊可以檢視官方文檔JS API參考-資料請求 (harmonyos.com)

最後感謝zh的幫助，讓我了解到很多後端的知識(●'◡'●)