鴻蒙開發-使用fetch發起網絡請求

場景

鴻蒙基於JS搭建HelloWorld並修改國際化文件：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050

在上面基於JS搭建起來Hello World之后，

怎樣發起網絡請求獲取數據。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

fetch API接口

首先需要配置網絡訪問的權限

在config.json中的module標簽中添加

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

添加位置如下

 

 

默認支持https，如果要支持http，需要在config.json里增加network標簽，屬性標識 "usesCleartext": true。即：

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

 

 

然后在pages下新建一個頁面，右鍵new-JS Page

 

 

這里叫fetch，然后就會在pages下面新增fetch頁面，下面有hml、js、css。

然后打開js文件

首先需要導入接口模塊

import fetch from '@system.fetch';

然后再生命周期函數onInit中通過fetch.fetch發起請求。

    onInit() {
        //發起網絡請求
        fetch.fetch({
            url:`https://qqlykm.cn/api/api/tq.php?city=北京`,
            responseType:"json",
            success:(resp)=>
            {
                this.winfo = resp.data;
            }
        });
    }

其中url就是網絡請求的url

這里是從網絡上找的免費api

 

 

然后將接口的返回值給屬性winfo

    data: {
        winfo:"默認數據"
    },

完整的js代碼為

import router from '@system.router';
import fetch from '@system.fetch';
export default {
    data: {
        winfo:"默認數據"
    },
    goback(){
        router.back();
    },
    onInit() {
        //發起網絡請求
        fetch.fetch({
            url:`https://qqlykm.cn/api/api/tq.php?city=北京`,
            responseType:"json",
            success:(resp)=>
            {
                this.winfo = resp.data;
            }
        });
    }
}

其中route和goback是用來實現路由跳轉

hml頁面上

<div class="container">
    <button @click="goback">返回</button>
    <text >
        {{ winfo }}
    </text>
</div>

效果

fetch的參數有

參數名

類型	必填	說明
url	string	是	資源地址。
data	string | Object	否	請求的參數，可選類型是字符串或者json對象。
header	Object	否	設置請求的header。
method	string	否	請求方法默認為GET，可選值為：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE。
responseType	string	否	默認會根據服務器返回header中的Content-Type確定返回類型，支持文本和json格式。詳見success返回值。
success	Function	否	接口調用成功的回調函數。
fail	Function	否	接口調用失敗的回調函數。
complete	Function	否	接口調用結束的回調函數。

data

表2 data與Content-Type關系

Content-Type	說明
string	不設置	Content-Type默認為 text/plain，data值作為請求的body。
string	任意 Type	data值作為請求的body。
Object	不設置	Content-Type默認為application/x-www-form-urlencoded，data按照資源地址規則進行encode拼接作為請求的body。
Object	application/x-www-form-urlencoded	data按照資源地址規則進行encode拼接作為請求的body。

success返回值：

參數名

類型	說明
code	number	表示服務器的狀態code。
data	string | Object	返回數據類型由responseType確定，詳見responseType與success中data關系。
headers	Object	表示服務器response的所有header。

responseType

表3 responseType與success中data關系

data	說明
無	string	服務器返回的header中的type如果是text/*或application/json、application/javascript、application/xml，值為文本內容。
text	string	返回文本內容。
json	Object	返回json格式的對象。