場(chǎng)景

鴻蒙基于JS搭建HelloWorld并修改國(guó)際化文件：

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

在上面基于JS搭建起來(lái)Hello World之后，

怎樣發(fā)起網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

fetch API接口

首先需要配置網(wǎng)絡(luò)訪問(wèn)的權(quán)限

在config.json中的module標(biāo)簽中添加

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

添加位置如下

默認(rèn)支持https，如果要支持http，需要在config.json里增加network標(biāo)簽，屬性標(biāo)識(shí)

"usesCleartext": true。即："deviceConfig": {"default": {"network": {"cleartextTraffic": true}}},

然后在pages下新建一個(gè)頁(yè)面，右鍵new-JS Page

這里叫fetch，然后就會(huì)在pages下面新增fetch頁(yè)面，下面有hml、js、css。

然后打開(kāi)js文件

首先需要導(dǎo)入接口模塊

import fetch from '@system.fetch';

然后再生命周期函數(shù)onInit中通過(guò)fetch.fetch發(fā)起請(qǐng)求。

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

其中url就是網(wǎng)絡(luò)請(qǐng)求的url

這里是從網(wǎng)絡(luò)上找的免費(fèi)api

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

??? data: {winfo:"默認(rèn)數(shù)據(jù)"},

完整的js代碼為

import router from '@system.router'; import fetch from '@system.fetch'; export default {data: {winfo:"默認(rèn)數(shù)據(jù)"},goback(){router.back();},onInit() {//發(fā)起網(wǎng)絡(luò)請(qǐng)求fetch.fetch({url:`https://qqlykm.cn/api/api/tq.php?city=北京`,responseType:"json",success:(resp)=>{this.winfo = resp.data;}});} }

其中route和goback是用來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)

hml頁(yè)面上

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

效果

fetch的參數(shù)有

參數(shù)名

類型

必填

說(shuō)明

url	string	是	資源地址。
data	string | Object	否	請(qǐng)求的參數(shù)，可選類型是字符串或者json對(duì)象。
header	Object	否	設(shè)置請(qǐng)求的header。
method	string	否	請(qǐng)求方法默認(rèn)為GET，可選值為：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE。
responseType	string	否	默認(rèn)會(huì)根據(jù)服務(wù)器返回header中的Content-Type確定返回類型，支持文本和json格式。詳見(jiàn)success返回值。
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)。

表2?data與Content-Type關(guān)系

data

Content-Type

說(shuō)明

string	不設(shè)置	Content-Type默認(rèn)為 text/plain，data值作為請(qǐng)求的body。
string	任意 Type	data值作為請(qǐng)求的body。
Object	不設(shè)置	Content-Type默認(rèn)為application/x-www-form-urlencoded，data按照資源地址規(guī)則進(jìn)行encode拼接作為請(qǐng)求的body。
Object	application/x-www-form-urlencoded	data按照資源地址規(guī)則進(jìn)行encode拼接作為請(qǐng)求的body。

success返回值：

參數(shù)名

類型

說(shuō)明

code	number	表示服務(wù)器的狀態(tài)code。
data	string | Object	返回?cái)?shù)據(jù)類型由responseType確定，詳見(jiàn)responseType與success中data關(guān)系。
headers	Object	表示服務(wù)器response的所有header。

表3?responseType與success中data關(guān)系

responseType

data

說(shuō)明

無(wú)	string	服務(wù)器返回的header中的type如果是text/*或application/json、application/javascript、application/xml，值為文本內(nèi)容。
text	string	返回文本內(nèi)容。
json	Object	返回json格式的對(duì)象。

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的鸿蒙开发-使用fetch发起网络请求的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。