天天看点

鸿蒙JS中使用fetch发送数据请求

首先需要配置网络访问的权限,在config.json中添加以下代码。

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

添加位置如下图所示

鸿蒙JS中使用fetch发送数据请求

默认支持https,如果要支持http,需要在config.json的"deviceConfig": {}里增加network标签,属性标识

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

添加位置如下图所示:

鸿蒙JS中使用fetch发送数据请求

 配置完了以后就可以使用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() {
    }
}
           

 运行后点击按钮就开始获取数据了,获取数据需要一点时间,耐心等一下哦!

鸿蒙JS中使用fetch发送数据请求

获取成功会在手机上显示,获取失败的话会在左下角的Hilog中显示“获取数据失败”。

更多的信息可以查看官方文档JS API参考-数据请求 (harmonyos.com)

最后感谢zh的帮助,让我了解到很多后端的知识(●'◡'●)

继续阅读