首先需要配置网络访问的权限,在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的帮助,让我了解到很多后端的知识(●'◡'●)